CSS知识总结（九）

CSS常用样式

10.自定义动画

　　1）关键帧（keyframes）

　　　　被称为关键帧，其类似于Flash中的关键帧。

　　　　在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

　　　　语法：@keyframes animationname {keyframes-selector {css-styles;}}

　　　　animationname：定义动画的名称。

　　　　keyframes-selector：以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。建议定义百分比选择器。

　　　　css-styles：通过 @keyframes 规则，您能够创建动画，就是将一套 CSS 样式逐渐变化为另一套样式，并且能够多次改变这套 CSS 样式。

　　　　兼容性：目前浏览器都不支持@keyframes规则，需要加上前缀"-moz-","-o-","-webkit-"。

　　　　例子：

@-webkit-keyframes FromLeftToRight{   /* Safari 和 Chrome */

    0% {left:;}

    100% {left:800px;}

}

@-moz-keyframes FromLeftToRight{    /* Firefox */

    0% {left:;}

    100% {left:800px;}

}

@-o-keyframes FromLeftToRight{      /* Opera */

    0% {left:;}

    100% {left:800px;}

}

@keyframes FromLeftToRight{

    0% {left:;}

    100% {left:800px;}

}

　　2）动画名称（animation-name）

　　　　元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。

　　　　animation-name ：none | <identifier>

　　　　<identifier>：定义一个或多个动画名称，如果是多个，用逗号分隔。

　　　　例子：

div{

    -webkit-animation-name:FromLeftToRight;

    -moz-animation-name:FromLeftToRight;

    -o-animation-name:FromLeftToRight;

    animation-name:FromLeftToRight;

}

@-webkit-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:800px;}

}

@-moz-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:800px;}

}

@-o-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:800px;}

}

@keyframes FromLeftToRight{

    0% {left:;}

    100% {left:800px;}

}

　　3）动画时间（animation-duration）

　　　　指定对象动画的持续时间

　　　　animation-duration：<time>

　　例子源代码：

/* CSS代码 */

.duration{

    width:100px;

    height:100px;

    background:#000;

    position:relative;

    -webkit-animation-name:FromLeftToRight;

    -webkit-animation-duration:3s;

    -moz-animation-name:FromLeftToRight;

    -moz-animation-duration:3s;

    animation-name:FromLeftToRight;

    animation-duration:3s;

}

@-webkit-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@-moz-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

<!-- HTML代码 -->

<body>

    <p>请按F5刷新动画（矩形用3秒向右移动500px）</p>

    <div class="duration"></div>

</body>

　　效果：

请按F5刷新动画（矩形用3秒向右移动500px）

　　4）动画的过渡速度（animation-timing-function）

　　　　①ease : 默认值，逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))

　　　　②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,1))

　　　　③ease-in : 加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))

　　　　④ease-out : 减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))

　　　　⑤ease-in-out : 加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1))

　　　　⑥cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。

　　例子源代码：

/* CSS代码 */

.function{

    width:100px;

    height:100px;

    background:#ccc;

    position:relative;

    margin:5px;

    -webkit-animation-name:FromLeftToRight;

    -webkit-animation-duration:3s;

    -moz-animation-name:FromLeftToRight;

    -moz-animation-duration:3s;

    animation-name:FromLeftToRight;

    animation-duration:3s;

}

.ease-in{

    -webkit-animation-timing-function:ease-in;

    -moz-animation-timing-function:ease-in;

    animation-timing-function:ease-in;

}

.ease-out{

    -webkit-animation-timing-function:ease-out;

    -moz-animation-timing-function:ease-out;

    animation-timing-function:ease-out;

}

@-webkit-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@-moz-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

<!-- HTML代码 -->

<body>

    <p>请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）</p>

    <div class="function ease-in">ease-in</div>

    <div class="function ease-out">ease-out</div>

</body>

　　效果：

请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）

ease-in

ease-out

　　5）动画延迟时间（animation-delay）

　　　　指定对象动画延迟的时间

　　　　animation-delay：<time>

　　例子源代码：

/* CSS代码 */

.delay{

    width:100px;

    height:100px;

    background:#000;

    position:relative;

    -webkit-animation-name:FromLeftToRight;

    -webkit-animation-duration:3s;

    -webkit-animation-delay:2s;

    -moz-animation-name:FromLeftToRight;

    -moz-animation-duration:3s;

    -moz-animation-delay:2s;

    animation-name:FromLeftToRight;

    animation-duration:3s;

    animation-delay:2s;

}

@-webkit-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@-moz-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

<!-- HTML代码 -->

<body>

    <p>请按F5刷新动画（刷新后请等待2秒启动动画）</p>

    <div class="delay"></div>

</body>

　　效果：

请按F5刷新动画（刷新后请等待2秒启动动画）

　　6）动画执行次数（animation-iteration-count）

　　　　animation-iteration-count：infinite | <number>

　　　　infinite表示无限次数，number指定循环次数。

　　例子源代码：

/* CSS代码 */

.infinite{

    width:100px;

    height:100px;

    background:#000;

    position:relative;

    -webkit-animation-name:FromLeftToRight;

    -webkit-animation-duration:3s;

    -webkit-animation-iteration-count:infinite;

    -moz-animation-name:FromLeftToRight;

    -moz-animation-duration:3s;

    -moz-animation-iteration-count:infinite;

    animation-name:FromLeftToRight;

    animation-duration:3s;

    animation-iteration-count:infinite;

}

@-webkit-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@-moz-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

<!-- HTML代码 -->

<body>

    <p>动画全自动无限循环播放</p>

    <div class="infinite"></div>

</body>

　　效果：

动画全自动无限循环播放

　　7）动画的顺序（animation-direction）

　　　　设置对象动画在循环中是否反向运动

　　　　animation-direction : normal | reverse | alternate | alternate-reverse

　　　　normal：正常方向

　　　　reverse：反方向运行

　　　　alternate：动画先正常运行再反方向运行，并持续交替运行

　　　　alternate-reverse：动画先反运行再正方向运行，并持续交替运行

　　例子源代码：

/* CSS代码 */

.box{

    width:100px;

    height:50px;

    background:#ccc;

    margin:5px;

    position:relative;

    -webkit-animation-name:FormLeftToRight;

    -moz-animation-name:FormLeftToRight;

    animation-name:FormLeftToRight;

    -webkit-animation-duration:5s;

    -moz-animation-duration:5s;

    animation-duration:5s;

    -webkit-animation-iteration-count:infinite;

    -moz-animation-iteration-count:infinite;

    animation-iteration-count:infinite;

}

.reverse{

    -webkit-animation-direction:reverse;

    -moz-animation-direction:reverse;

    animation-direction:reverse;

}

.alternate{

    -webkit-animation-direction:alternate;

    -moz-animation-direction:alternate;

    animation-direction:alternate;

}

.alternate-reverse{

    -webkit-animation-direction:alternate-reverse;

    -moz-animation-direction:alternate-reverse;

    animation-direction:alternate-reverse;

}

@-webkit-keyframes FormLeftToRight{

    0%{left:;}

    100%{left:500px;}

}

@-moz-keyframes FormLeftToRight{

    0%{left:;}

    100%{left:500px;}

}

@keyframes FormLeftToRight{

    0%{left:;}

    100%{left:500px;}

}

 <!-- HTML代码 -->

<body>

    <p>四种不同的顺序</p>

    <div class="box">normal</div>

    <div class="box reverse">reverse</div>

    <div class="box alternate">alternate</div>

    <div class="box alternate-reverse">alternate-reverse</div>

</body>

　　效果：

四种不同的顺序

normal

reverse

alternate

alternate-reverse

　　8）动画的状态（animation-play-state）

　　　　设置对象动画的状态

　　　　animation-play-state：running | paused

　　　　running：运动

　　　　paused：暂停

　　例子源代码：

/* CSS代码 */

.state{

    width:100px;

    height:100px;

    background:#000;

    position:relative;

    -webkit-animation-name:FromLeftToRight;

    -webkit-animation-duration:3s;

    -webkit-animation-iteration-count:infinite;

    -moz-animation-name:FromLeftToRight;

    -moz-animation-duration:3s;

    -moz-animation-iteration-count:infinite;

    animation-name:FromLeftToRight;

    animation-duration:3s;

    animation-iteration-count:infinite;

}

.state:hover{

    -webkit-animation-play-state:paused;

    -moz-animation-play-state:paused;

    animation-play-state:paused;

}

@-webkit-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@-moz-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

<!-- HTML代码 -->

<body>

    <p>鼠标移动到矩形上可以暂停动画</p>

    <div class="state"></div>

</body>

　　效果：

鼠标移动到矩形上可以暂停动画

　　9）动画时间之外的状态（animation-fill-mode）

　　　　设置对象动画时间之外的状态

　　　　animation-fill-mode ： none | forwards | backwards | both

　　　　none：默认值。不设置对象动画之外的状态

　　　　forwards：设置对象状态为动画结束时的状态

　　　　backwards：设置对象状态为动画开始时的状态

　　　　both：设置对象状态为动画结束或开始的状态

　　例子源代码：

/* CSS代码 */

.mode{

    width:100px;

    height:100px;

    background:#000;

    position:relative;

    -webkit-animation-name:FromLeftToRight;

    -webkit-animation-duration:3s;

    -webkit-animation-fill-mode:forwards;

    -moz-animation-name:FromLeftToRight;

    -moz-animation-duration:3s;

    -moz-animation-fill-mode:forwards;

    animation-name:FromLeftToRight;

    animation-duration:3s;

    animation-fill-mode:forwards;

}

@-webkit-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@-moz-keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

@keyframes FromLeftToRight{

    0% {left:;}

    100% {left:500px;}

}

<!-- HTML代码 -->

<body>

    <p>请按F5刷新动画（动画结束后停在结束位置）</p>

    <div class="mode"></div>

</body>

　　效果：

请按F5刷新动画（动画结束后停在结束位置）

　　10）动画复合属性（animation）

　　　　通过 animation ，我们能够创建自定义动画，这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。

　　　　animation：<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state> [ ,*]

　　利用学过的动画样式，制作一个下滑菜单栏

　　源代码：

/* CSS代码 */

.dropmenu{

    width:100px;

    height:30px;

    line-height:30px;

    text-align:center;

    background:green;

    border-radius:10px;

    overflow:hidden;

}

.dropmenu a{

    font-family:"微软雅黑";

    font-size:18px;

    color:#fff;

    text-decoration:none;

}

.dropmenu ul{

    list-style-type:none;

    padding:;

    margin:;

}

.dropmenu ul li{

    background:#808080;

}

.dropmenu:hover{

    -webkit-animation-name:SlideDown;

    -moz-animation-name:SlideDown;

    animation-name:SlideDown;

    -webkit-animation-duration:1s;

    -moz-animation-duration:1s;

    animation-duration:1s;

    -webkit-animation-fill-mode:forwards;

    -moz-animation-fill-mode:forwards;

    animation-fill-mode:forwards;

}

@-webkit-keyframes SlideDown{

    0% {height:30px;}

    100% {height:155px;}

}

@-moz-keyframes SlideDown{

    0% {height:30px;}

    100% {height:155px;}

}

@keyframes SlideDown{

    0% {height:30px;}

    100% {height:155px;}

}

<!-- HTML代码 -->

<body>

    <div class="dropmenu">

        <a href="###">菜单栏</a>

        <ul>

            <li><a href="###">AAA</a></li>

            <li><a href="###">AAA</a></li>

            <li><a href="###">AAA</a></li>

            <li><a href="###">AAA</a></li>

        </ul>

    </div>

</body>

　　效果：

菜单栏