transform、transition、animation动画效果

最新推荐文章于 2024-09-03 16:55:20 发布

不及0908

最新推荐文章于 2024-09-03 16:55:20 发布

阅读量2.4k

点赞数 3

本文链接：https://blog.csdn.net/huhuhuja/article/details/110479951

版权

transform(变形)
transition(过渡)
animation(动画)

一、transform：直接改变大小和位置，显示改变的结构，没有过渡和变形的时间

transform:rotate(360deg) scale(-1.2,1.2) translate(100px,50px) skew(45deg,45deg)

通过transition:transform 1s 指定对transform起动画效果

（1）旋转rotate

利用css变形属性可以将对应的属性旋转对应的角度，可以顺时针旋转，逆时针（负值）旋转，可以3D旋转，3D旋转可以分别绕X轴Y轴Z轴旋转；

（2）缩放scale

负值为先翻转，再缩放对应的倍数，可以在X、Y、Z上做缩放

（3）位移translate

可以在X、Y轴上做平移，或者同时在X、Y、Z轴上做平移

（4）斜切skew

能够让元素倾斜显示，本质上是可以让X、Y轴倾斜一定程度

二、transition（过渡）：会有一个形变的过程，会有过渡和形变时间

第一个属性值表示动画变换的时间，第二个属性值代表延时

transition:transform 1s 指定对transform 起效果

transition:margin 1s 指定对margin 起效果

transition：width 1s,height 1s 1s;

速度曲线贝塞尔曲线

transition: 1s linear 匀速

transition: 1s esae-in 匀加速

transition: 1s ease-out 匀减速

infinite为无限次数循环。

三、animation(动画)

animation是一个过渡的过程，引入了帧的概念，定义keyframes动画，然后绑定一个或者多个动画。transition有点像他的简化版，animation也可以实现transition变化某个属性的功能

并且可以去设置动画的播放时间（animation-duration），播放方式（animation-timing-function，播放速度），播放次数，播放方向（在不同次数，发生不同方向的动画，比如从左到右，然后从右到左），播放后的状态（会到初始状态，还是结束状态）控制动画状态（控制某物体暂停或执行动画）

transition和animation主要区别：

transition也可以看做animation的缩略版，他们实现的功能有重复的地方，比如说要实现某个div的宽度有30rem变到20rem,两者都可以实现。

兼容：

div{ 
    animation:mymove 5s infinite;
     -webkit-animation:mymove 5s infinite;
     /* Safari 和 Chrome */ 
} 
@keyframes mymove {
     from {left:0px;} 
     to {left:200px;} 
 }
 @-webkit-keyframes mymove /*Safari and Chrome*/ { 
    from {left:0px;} 
    to {left:200px;} 
}

引入网页动画库：