动画属性
@keyframes 关键帧 ——> animation 活泼 （配合使用）
transform 变换 ——> transition 过渡 （配合使用）
1、animation
animation : name,完成时间,速度曲线,延迟时间,播放次数,轮流反向播放动画
animation : name,5s,linear,infinite
属性作用介绍
- animation-name 规定需要绑定到选择器的 keyframe 名称。
- animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function 规定动画的速度曲线。 常用值值：linear 动画从头到尾的速度是相同的。
- animation-delay 规定在动画开始之前的延迟。
- animation-iteration-count 规定动画应该播放的次数。常用值值：infinite 无限次播放 。
- animation-direction 规定是否应该轮流反向播放动画。alternate 回来时反向
扩展
animation-fill-mode:forwards 让动画保持在最后一帧
animation-play-state:paused; 让动画在当前帧停止
2、 animation 动画过渡
transition: 属性名||all，完成时间，速度曲线，延迟时间;
transition: all 5s linear;
属性作用介绍
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。常用值值：linear 动画从头到尾的速度是相同的。
- transition-delay 定义过渡效果何时开始。
3、transform 该属性允许我们对元素进行旋转、缩放、移动或倾斜
rotate 旋转，scale缩放，skew倾斜，translate移动
4、 box-shadow:水平,垂直,模糊距离,阴影的尺寸,阴影的颜色,将外部阴影 (outset) 改为内部阴影
box-shadow:5px 5px 5px 5px red outset;
实例
@keyframes 关键帧 + animation 活泼
.d1{ ???animation: mymove 5s linear 1s infinite alternate; ????-webkit-animation: mymove 5s linear 1s infinite alternate; ????/*执行动画mymove ?5s内完成 ?动画从头到尾的速度是相同的 ?无限次播放 ?回来时反向*/}@keyframes mymove{ ???0% {top:0px;} ???100% {top:200px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{ ???from {top:0px;} ???to {top:200px;}}transform 变换 + transition 过度
.d1{ ???width: 206px; ???height: 206px; ???background: pink;}.d1{ ???transform: rotate(0deg); ???transition: all 3s linear;}.d1:hover{ ???transform: rotate(360deg);}容易忘记的css属性和动画属性
原文地址：https://www.cnblogs.com/hyx626/p/9786970.html