##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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值