码迷,mamicode.com
首页 > Web开发 > 详细

css动画

时间:2017-05-10 01:08:32      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:旋转   sed   无限   暂停   移动   idt   执行   cti   property   

CSS动画

1.1 2D、3D(transform)

2D转化值:

1translate();根据给定的left(x轴)和top(y轴)参数,移动元素。

例: div{
        transform:translate(50px,50px)
    }

2.rotate();使元素顺时针旋转给定的角度。正数顺时针,负数逆时针,单位(deg)。
3.scale();根据宽度(x轴),高度(y轴),缩放图片尺寸(从图片中心放大缩小)

例:transform:scale(2,4);即宽度放大2倍,高度放大4倍

4.skew();根据给定的水平线(x轴)和垂直线(y轴)参数,元素翻转(拉扯)给定的角度

3D转换

属性值:rotateX();围绕x轴根据角度旋转多少角度
       rotateY();围绕y轴根据角度旋转多少角度

1.2 CSS过渡(transition)(即动画过程)

transition-property:width;          动画执行效果作用体
transition-duration:1s;             动画执行时间
transition-timing-function:linear;  动画效果
transition-delay:2s;                动画推迟时间

transition-timing-function包含的属性值:

linear       匀速
ease         慢速开始——快速——慢速结束
ease-in      慢速开始
ease-out     慢速结束
ease-in-out  慢速开始和慢速结束

简写:

transition:width 1s linear 2s

1.3 CSS3动画(@keyframes)

例:第一第二步
    @keyframes myFirst{
        0%{
            background:red;
        }
        50%{
            background:blue;
        }
        100%{
            background:black;
        }
    }
或:
    @keyframes myFirst{
        from{
            background:red;
        }
        to{
            background:blue;
        }
    }
第三第四步:
选择器{animation:myFirst(动画名) 5s}

animation属性:

1.name;2.时间;3.执行效果;4.推迟时间
5.animation-iteration-count:播放次数
    ①. n:次数,默认为1
    ②. infinite:无限循环
6.animation-direction:是否逆向播放
    ①. normal:正常播放(默认)
    ②. alternate:轮流逆向播放
7.animation-play-state:规定动画正在播放还是暂停
    ①. paused:动画已暂停
    ②. running:动画正在播放

简写:

animation:myFirst 5s linears 2s infinite alternate

css动画

标签:旋转   sed   无限   暂停   移动   idt   执行   cti   property   

原文地址:http://www.cnblogs.com/justsilky/p/6833395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!