1、@keyframes规则。from{属性：值} to{属性：值}。
2、0%{属性：值} 100%{属性：值}0% 是动画的开始，100% 是动画的完成。可以在二者之间加入25%，50%等。
3、将动画绑定到选择器：在样式中，设置动画属性animation，自定义动画名称和时长。
4、规定动画开始时的等待时间：animation-delay：时间；可以为秒、毫秒2s，2ms。
5、播放次数：animation-iteration-count：次数；永久播放的值取infinite。
6、动画速度曲线：animation-timing-function：变化类型；变化类型有：linear 匀速；ease-in 开始慢；ease-out 结束慢；ease 动画有一个缓慢的开始，然后快，结束慢。
扩展资料
animation 属性是一个简写属性，用于设置六个动画属性：
1、animation-name
规定需要绑定到选择器的 keyframe 名称。
2、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
3、animation-timing-function
规定动画的速度曲线。
4、animation-delay
规定在动画开始之前的延迟。
5、animation-iteration-count
规定动画应该播放的次数。
6、animation-direction
规定是否应该轮流反向播放动画。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
在CSS3中新增了元素的过渡效果属性：transitiontransition也是一个复合属性，包括四个值分别是：
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
基本使用如下：
多个属性可以单独设置，也可以通过transition一起设置
例如：点击按钮时，方块宽度由100px变成200px，延迟1s，过渡时间用了2s，速度是按照cubic-bezier设定的一个速度
以上就是transition的基本使用！
