transition-property: none/all; 
transition-duration:2s;运动时间,默认是0秒
transition-delay:0s; 延迟时间默认0秒
transition-timing-function:ease;逐渐变慢(默认)

linear匀速 ease-in加速 ease-out减速 ease-in-out先加速再减速*/

 1,样式 持续时间 延时  可连写多组每个样式之间使用','隔开

.过度的样式 可以同时指定多个 

1,过度的时间 2,过度的样式
transition: 1s width , 2s height , 1s background;

 

2. 过度的形式
贝塞尔曲线很重要 几乎所有的都能用贝塞尔曲线做出来
网址:http://cubic-bezier.com/#.14,.63,.79,.21

 

伪类选择器,光标移动到上面时触发,产生动画效果

 

 

-------------------------------------------------

transform: 形变属性 

平移:translate

平移:translate 给定坐标, 沿着做标轴移动 
第一个参数:x轴坐标 第二个参数:y轴坐标 以自身作为参照

可给 数值或者百分比%

 

 

旋转角度  单位是deg  以自身中心作为旋转中心

正数沿着顺时针方向   负数逆时针方向

设置形变参考原点 默认值是center  top  bottom left right


transform: rotateX(45deg);
transform: rotateY(45deg);

 

 

scale() 缩放倍数
transform: scale(2.0, 0.5)
大于1表示放大 1以下代表缩小
盒子里的内容也会跟着一起缩放

transform-origin: left;  缩放的原点
transform: scale(0.2, 0.5); 参数XY
transform: scaleX(0.5);  沿着X轴
transform: scaleY(.4);  沿着Y轴

 

 

 

skew() 倾斜
X轴的倾斜:正数逆时针
Y轴的倾斜:正数顺时针

倾斜指的是XY轴的倾斜 
transform-origin: left;  设置倾斜的原点
transform: skew(30deg, 30deg);  参数XY
transform: skewX(30deg); 沿着X轴
transform: skewY(30deg);  沿着Y轴


转载的时候记得写明出处哦!济南网站建设!http://hongsehuoxian.com
看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于transition&transform,CSS中过度和变形的设置的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
用css3动画来实现物体上下跳动的效果
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信