之前的网页实现动画效果必须依赖Flash或js，CSS3动画效果属性主要分为三类：过渡、变换、动画。但是这些CSS属性在Android和iOS上使用都必须使用私有前缀-webkit-。
-
浏览器对动画的兼容性支持：
兼容性.png
1、过渡
要实现这个效果，必须考虑两点，变换样式使用的CSS属性和变换样式变化的时长，设置过渡要用CSS属性transition，语法形式如下：
-webkit-transition: 属性名称 过渡时间 速度曲线 过渡延迟时间
其中，前面两个参数是必填的，后面两个参数是可选的，示例：
div {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: cadetblue;
/* 设置宽度和高度的变换时间为2s */
-webkit-transition: width 2s, height 2s;
}
div:hover {
width: 200px;
height: 200px;
}
当鼠标悬浮时，div的高度和宽度变化的过渡，如果所有的属性变化的时间一样长，过渡属性还可以设置为：
-webkit-transition:all 2s;
至于速度曲线，它的取值说明如下：
| 属性值 | 说明 |
|---|---|
| linear | 规定以相同的速度开始至结束的过渡效果，匀速 |
| ease | 慢速开始，然后变快，然后慢速结束的过程 |
| ease-in | 慢速开始（淡入）的过渡效果 |
| ease-out | 慢速结束（淡出）的过渡效果 |
2D以及3D的变换
CSS中的变换属性transform可以动态的控制一些HTML标签元素，让其在页面进行移动、缩放、倾斜、或结合过渡效果产生一些动画效果。
2D变换
- 平移：需要使用translate方法，指定中心点的x,y坐标的偏移量，值可以是负数，表示反方向移动元素，元素平移后，它原有的位置继续保留。
-webkit-transform: translate(50px, 100px);//水平向右偏移50像素，垂直向上偏移100像素
- 旋转：需要使用rotate方法，角度的单位用deg表示，默认的是顺时针，值可以使用负数，表示逆时针旋转
-webkit-transform: rotate(30deg); //绕中心点顺时针旋转30度
- 缩放：需要使用scale方法，指定宽度和高度的缩放比例，比例可以是小数。
-webkit-transform: scale(0.5, 0.5); //宽高缩放一半
- 倾斜：需要使用skew方法，指定相对于x轴和y轴的倾斜角度
-webkit-transform: skew(10deg, 10deg); //相对于X轴和Y轴都倾斜10度
3D变换
transform属性的3D变换主要是让元素绕X轴，Y轴进行的。
- X轴旋转：需要使用rotateX方法，指定旋转的角度，单位为deg，默认为顺时针旋转，值为负数则为逆时针。
-webkit-transform: rotateX(120deg); //绕X轴顺时针旋转120度
- Y轴旋转：使用方法与rotateX一样
-webkit-transform: rotateY(120deg); //绕Y轴顺时针旋转120度
CSS3中的一些动画控制
CSS中除了支持渐变、过渡和变换旋转的效果，还支持更加强大的动画效果实现，它提供了一种动画控制属性animation，可以用来设置更加复杂的动画效果，例如：控制动画的动画次数，逆向动画，动画的播放和暂停等
要使用animation动画控制属性，首先需要定义动画规则，动画的定义规则使用的是@keyframes规则，用它来定义动画中的关键帧，它的语法形式有两种：一种是只设置起始和终点的动画帧，另外一种是使用百分比来细化动画帧
- 只设置起始的动画帧：
@-webkit-keyframs 写上你的动画规则名称{
from{
// CSS属性的设置
}
to {
// CSS属性的设置
}
}
- 百分比定义动画帧：
@-webkit-keyframes 写上你的动画规则名称 {
0% {
// CSS属性的设置
}
25% {
// CSS属性的设置
}
50% {
// CSS属性的设置
}
100% {
// CSS属性的设置
}
}
定义好动画帧，就可以使用animation属性进行动画的控制了，代码如下：
-webkit-animation: name duration timing-function delay iteration-count direction'
- name：用@keyframes已定义好的动画规则名称
- duration：动画花费的时间
- timing-function：动画的速度曲线，如:linear...
- delay：动画的延迟时间
- iteration-count：动画的播放次数
- direction：动画逆向播放，默认值为normal，alternate表示动画的轮流反向播放
示例：
.img-box {
width: 300px;
height: 300px;
margin: 0 auto;
border-radius:150px;
}
.img-box img {
width: 300px;
height: 300px;
border-radius:50%;
overflow: hidden;
}
@-webkit-keyframes myAnimation{
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.myRotate {
-webkit-animation: myAnimation 9s linear 0s 10 ;
}
@keyframes定义的动画规则.gif
网友评论