##CS3动画效果

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

 

转载于:https://www.cnblogs.com/liurui-bk517/p/11060655.html