CSS动画

transition 过渡动画

/*过渡动画效果
            1：什么属性参与过渡效果
            2：过渡动画时间
            3：过渡效果*/
transition: background 3s ease;

实例：鼠标悬浮时，背景变蓝，css部分

div {
    width:100px;
    height:100px;
    transition: background-color 1s ease;/*写在div这里而不是div:hover里*/
}
div:hover {
    background-color:blue;
}

transform 形状变换

/*元素平移（x，y）*/
transform: translate(100px,100px);

/*缩放（放大倍数） */
transform: scale(1.5);

/*中心旋转*/
transform: rotate(180deg);
/*轴旋转*/
transform: rotatex(180deg);
transform: rotatey(180deg);

/*倾斜*/
transform: skewx(30deg);
transform: skewy(30deg);

animation动画

@keyframes myAnt {
    0%   {color:red;}
    25%  {color:yellow;}
    50%  {color:blue;}
    75%  {color:green;}
    100% {color:red;}
}
div{
    animation-name:myAnt;
    animation-duration: 5s;
    font-size: 50px;
}
div:active{
    animation-play-state: paused;
}

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