css---animation属性+@keyframes属性添加动画

animation属性

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

 @keyframes属性

@keyframes是css的一种规则，可以用来定义css动画的一个周期的行为，创建简单的动画。通过 @keyframes 规则，能够创建动画。

说明：创建动画的原理是，将一套 css 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 css 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

实例---元素上下抖动动画

HTML代码

<div class="container">
    <div class="demo shake" id="shake">抖一抖</div>
</div>

css代码

.container{
    background-color: greenyellow;
    width: 200px;
    height: 200px;
}
.demo{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 50px;
}
.shake {
    animation: shake 800ms ease-in-out;
}
@keyframes shake { /* 垂直抖动 */
    10%, 90% { transform: translate3d(0, -1px, 0); }
    20%, 80% { transform: translate3d(0, +2px, 0); }
    30%, 70% { transform: translate3d(0, -4px, 0); }
    40%, 60% { transform: translate3d(0, +4px, 0); }
    50% { transform: translate3d(0, -4px, 0); }
}

参考：

http://www.fly63.com/article/detial/6653

https://www.w3school.com.cn/cssref/pr_animation.asp