transition、transform、animation这三者自己老是傻傻分不清楚，特意写下来以备日后查看

transition 过渡

transition:property duration timing-function delay
设置当前元素的过渡效果，有四个简写属性:

  • transition-property: none| all(所有属性) | property(属性名称，可多个用逗号分开)

指定css属性的name

  • transition-duration: time

规定完成过渡效果需要花费的时间（以秒或毫秒计）, 默认值是 0

  • transition-timing-function:linear(匀速) | ease(慢开始快中慢结束) | ease-in(慢开始) | ease-out(慢结束) |ease-in-out(慢速开始和结束)|cubic-bezier(n,n,n,n) (0 至 1 之间的数值)

指定transition效果的转速曲线

  • transition-delay: time

定义transition效果开始的时候,指定秒或毫秒数之前要等待切换效果开始

**

transform 2D\3D转换

可将元素：旋转，缩放，移动，倾斜
案例参考：https://c.runoob.com/codedemo/3391
image.png

**

animation 动画

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。

keyframes创建动画

image.png