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;
100px;
}
25%{
background-color: #42fff3;
100px;
}
50%{
background-color: green;
200px;
}
75%{
background-color: #ff27d6;
300px;
}
100%{
background-color: blue;
500px;
}
}
@-webkit-keyframes color {
0%{
background-color: red;
100px;
}
25%{
background-color: #42fff3;
100px;
}
50%{
background-color: green;
200px;
}
75%{
background-color: #ff27d6;
300px;
}
100%{
background-color: blue;
500px;
}
}
@-o-keyframes color {
0%{
background-color: red;
100px;
}
25%{
background-color: #42fff3;
100px;
}
50%{
background-color: green;
200px;
}
75%{
background-color: #ff27d6;
300px;
}
100%{
background-color: blue;
500px;
}
}
@-ms-keyframes color {
0%{
background-color: red;
100px;
}
25%{
background-color: #42fff3;
100px;
}
50%{
background-color: green;
200px;
}
75%{
background-color: #ff27d6;
300px;
}
100%{
background-color: blue;
500px;
}
调用动画名称
属性 animation-name:
动画执行时间长度
aanimation-duration
动画执行的曲线函数
animation-timing-function 取值：ease
aniation
name duration timing-function delay