css--animate_综合

语法：div{
    animation: 动画名称 一个周期播放时间 速度曲线 延迟时间 下个周期是否逆向}
@keyframes 动画名称{
    from{
    //do something}  to{
    //do something}
}

下面的表格列出了 @keyframes 规则和所有动画属性：.

利用transform的动画效果：
1.translate(x,y)  2d,两点之间移动。还可以分开写translateX(x)只移动X 轴的值。translateY(y)只移动Y轴。2.scale(x,y) 缩放效果3.rotate(angle) 旋转效果，单位是deg(度)4.skew(x-angle,y-angle) 倾斜转换

水平移动效果：
@keyframes move{
      from{
        transform: translateX(0px);  }  to{
        transform: translateX(1000px);  } 	}
水平旋转：
@keyframes move{
    from{
    transform: rotate(180deg);
} to{
     transform: rotate(180deg); } }垂直旋转：
@keyframes move{
    from{
    transform: rotateY(180deg);
} to{
     transform: rotateY(180deg); } }

@keyframes move{
      from{
        transform: translateX(0px);  }  to{
        transform: translateX(1000px);  } 	}水平旋转：@keyframes move{
    from{
    　　　　transform: rotate(180deg);} to{
     transform: rotate(180deg); } }垂直旋转：@keyframes move{
    from{
    　　　　transform: rotateY(180deg);} to{
     transform: rotateY(180deg); } }

例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片播放Demo</title><style> .animate{
    width:100px;height:100px;background:red;position:absolute;animation: move .6s infinite alternate;}@keyframes move{
    from{
    transform: rotateY(180deg);}to{
    transform: rotateY(360deg);}}
</style>
</head>
<body><div class="animate"></div>
</body>
</html>