css动画animation属性

2021-06-01 21:31:48发布

本文将详细的讲解如何正确的学习css动画样式的布局,css给我们新增加了很多的样式,动画的能够使我们的网页更新有活力,所以本文将详细的介绍animation属性以及他的使用技巧。


1.动画调用

(1) 什么是动画

动画是 CSS3中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果


(2) 动画的基本使用

先定义动画

在调用定义好的动画


(3) 语法格式(定义动画)


(4)代码演示


@keyframes move {

    0% {

        width100px;

    }

    100% {

        width200px

    }

}

div {

    /* 调用动画  起的类名*/

    animation-namemove;

    /* 持续时间 */

    animation-duration1s

}


2.动画属性


属性

描述

@keyframes

规定动画。

animation

所有动画属性的简写属性,除了animation-play-state属性。

animation-name

规定@keyframes动画的名称。(必须的)

animation-duration

规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的)

animation-timing-function

规定动画的速度曲线,默认是“ease”。

animation-delay

规定动画何时开始,默认是0。1s

animation-iteration-count

规定动画被播放的次数,默认是1,还有infinite(无限循环)

animation-direction

规定动画是否在下一周期逆向播放,默认是“normal   ",alternate逆播放

animation-play-state

规定动画是否正在运行或暂停。默认是"running",还有"paused"。

animation-fill-mode

规定动画结束后状态,保持forwards回到起始backwards


3.代码演示

div {

    width100px;

    height100px;

    background-coloraquamarine;

    /* 动画名称 */

    animation-namemove;

    /* 动画花费时长 */

    animation-duration2s;

    /* 动画速度曲线 */

    animation-timing-functionease-in-out;

    /* 动画等待多长时间执行 */

    animation-delay2s;

    /* 规定动画播放次数 infinite: 无限循环 */

    animation-iteration-countinfinite;

    /* 是否逆行播放 */

    animation-directionalternate;

    /* 动画结束之后的状态 */

    animation-fill-modeforwards;

}


div:hover {

    /* 规定动画是否暂停或者播放 */

    animation-play-statepaused;

}

TAG标签: css

登录 后发表评论
0条评论
还没有人评论过~
嘿,我来帮您!