CS3动画效果
1 转换
转换的属性 :transform
属性值 : transform-function none
转换原点 旋转过程中 ：默认是元素中心点处
属性：transform-origin
2 2 D 转换
位移： 位置的变化
缩放： 元素大小的变换 缩小 0-1 放大>1
旋转：安照一定角度 实现旋转 相当于方向改变
位移： 函数 translate(x)
缩放： 元素大小的变换 缩小 0-1 放大>1 scale（参数）
旋转：安照一定角度 实现旋转 相当于方向改变 rotate(ndeg) n为正 顺时针旋转
倾斜 skew(xdeg) skewY(20deg)
/*偏移*/ transform: translate(100px); /*如果是负值，那么就是反转，如果大于1，那么放大，如果是0-1之间，那么就是缩小*/ transform: scale(-1); transform-origin: left; /*翻转*/ /*transform: rotate(45deg);*/ /*倾斜*/ transform: skew(30deg);
3 3D转换
perspective假定人眼投射到平面的距离
该属性必须定义在父元素上 其子元素能够实现3d转换的效果
注意浏览器兼容 -webkit-perspective
属性：transform
位移： transformZ(z);
transform3D(x,y,z);
旋转： rotateY(ndeg)；
rotate(x,y,z,ndeg);
4 过渡
什么是过度
css样式属性值在一段时间内平滑的过度
属性
transition-property
取值：none
all
property
允许过度的属性： 颜色 取值为数值的属性 转换-transform 渐变属性 visibility
transition: border-radius 10s linear 0s,background 10s ease 10s;
5 过渡
属性 transition-duration 取值 s|ms
6 设置过度时间曲线函数
属性： transition-timing-function
取值： ease 匀速
ease-in 加速
ease-out
ease-in-out
7 过度延迟
transition-delay
8 动画效果
关键帧 控制动画的每一步
8.1 处理兼容性问题
-moz-
-webkit-
-o-
-ms-
8.2 怎么来使用
1 生明动画
创建一个动画 并且指定名称 通过@keyframes 关键词生明动画的关键帧
2 为元素调用动画 动画名称
播放时间
、播放的次数
播放的方向
语法
@keyframs 动画名称{
from |0%{
//动画开始的动作 css样式
}
50%{
//动画中间的动作 css样式
}
to|100%{
//动画结束的动作 css样式
}
}
/*给这个动画起个名字*/ animation-name:color ; /*延迟的时间*/ animation-duration:5s ; /*速度：匀速*/ animation-timing-function: ease; /*设置播放次数*/ animation-iteration-count:infinite ;/*无限播放次数*/ /*动画播放的方向 normal 逆向播放reverse 轮流播放：alternate*/ animation-direction:alternate ; /*animation-direction: normal;*/ /*animation-direction: reverse;*/ -webkit-animation-name: color; -webkit-animation-duration:5s ; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count:infinite ; -webkit-animation-direction:alternate ; } .box:hover{ animation-play-state: paused; } @-moz-keyframes color { 0%{ background-color: red; width: 100px; } 25%{ background-color: #42fff3; width: 100px; } 50%{ background-color: green; width: 200px; } 75%{ background-color: #ff27d6; width: 300px; } 100%{ background-color: blue; width: 500px; } } @-webkit-keyframes color { 0%{ background-color: red; width: 100px; } 25%{ background-color: #42fff3; width: 100px; } 50%{ background-color: green; width: 200px; } 75%{ background-color: #ff27d6; width: 300px; } 100%{ background-color: blue; width: 500px; } } @-o-keyframes color { 0%{ background-color: red; width: 100px; } 25%{ background-color: #42fff3; width: 100px; } 50%{ background-color: green; width: 200px; } 75%{ background-color: #ff27d6; width: 300px; } 100%{ background-color: blue; width: 500px; } } @-ms-keyframes color { 0%{ background-color: red; width: 100px; } 25%{ background-color: #42fff3; width: 100px; } 50%{ background-color: green; width: 200px; } 75%{ background-color: #ff27d6; width: 300px; } 100%{ background-color: blue; width: 500px; }
调用动画名称
属性 animation-name:
动画执行时间长度
aanimation-duration
动画执行的曲线函数
animation-timing-function 取值：ease
aniation
name duration timing-function delay