标签：red har head 第一个 init normal 逆时针 执行 无限
css3中有translate,rotate,scale,skew,等属性值，但是这些属性值都需要写在trasnform中，
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo{
width: 200px;
height: 200px;
background-color: red;
transition: all 1s;//此处加一个过度效果，能够更加形象，但是transtion属性放在hover和hover之前是有不同的效果，可以自己试试
}
#demo:hover{
-webkit-transform: translate(100px,50px);
-moz-transform: translate(100px,50px);
-ms-transform: translate(100px,50px);
-o-transform: translate(100px,50px);
transform: translate(100px,50px);
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
translate:里面第一个值为横向移动，当这个值为负值时则是向左移动，正值时则是向右移动，同理，第二个值也类似。
rotate：带有单位为deg的值，整数位顺时针旋转，负数为逆时针旋转。
scale:有两个值，分别为x轴方向和y轴方向，大于1时为放大，小于1时为缩小，为负数时反转，在放大该数值的绝对值的倍数，比如-3，先反转，在放大倍；
css中的动画animate
首先：要创建一个动画
@keyframes animateName {
0%{
width: 100px;//定义起始状态
}
//中间可以添加若干个帧数
100%{
width: 500px;//定义结尾状态
}
}
然后：引用动画
需要都用到animation这个属性
animation: animateName 5s ease 1s infinite alternate;
animation里面有很多属性值,第一个为引用的动画名，第二个动画执行时间，第三个为执行曲线即是否匀速之类的，第四个为延迟执行时间，第五个为执行的次数，infinite为无限次，第六个为动画执行的方式，normal、alternate分别代表正常播放和轮流反方向播放
标签：red har head 第一个 init normal 逆时针 执行 无限
原文地址：http://www.cnblogs.com/mark20170707/p/7464958.html
