过渡
transition属性为简写属性
其中主要有四个属性
1、transition-property 该属性规定应用过渡的属性的名称 默认是all，
2、transition-duration 定义过渡效果用的时间 默认是0
3、transition-timing-function 指定效果的速度，一般取值为linear：是以相同的速度从开始到结束，默认值是ease
4、transition-delay 规定何时开始过渡效果 默认是0
动画
动画是使元素从一种样式逐渐变化为另一种样式的效果，用百分比来规定变化发生的时间，或者是
用关键词from 和to，等同于0 100%
一般我们用@keyframes‘规定动画的样式，后面跟动画的名称，类似选择器的作用
animation-name 规定@keyframes动画的名称
animation-duration 规定动画完成需要的时间
animation-timing-function 规定动画的速度曲线 默认是ease
animation-delay 规定动画何时开始，默认是0
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
通过代码可以了解到动画的一个央视的改变，div里几乎包含了所有的动画属性，通过@keyframes 规定动画的改变
原文：https://www.cnblogs.com/dumenglong/p/10951512.html