HiDocs
Search K

Appearance

动画属性 ​

过渡属性只能模拟动画效果

animation属性可以制作类似Flash动画

定义：通过关键帧控制动画的每一步，使元素从一种样式逐渐变化为另一种样式，实现复杂的动画效果

1.@keyframes ​

作用：==用于声明动画，指定关键帧==

帧，用于分解动画动作，每个帧代表某个时间点

定义每个帧上的动作

@keyframes的语法：name可以任意

n%的意思是，动画开始后会默认从0%走到100%，当到n%的时候，进行何种动作

css
@keyframes name  {
    from|0%{
        css样式
    }
    n%{
        css样式
    }
    to|100%{
        css样式
    }
 }

2.动画animation属性 ​

animation属性用于控制动画，==调用由@keyframes定义的动画==，写在父元素的属性里面，设置动画属性，

如时间、次数等。

animation属性是一个简写属性

语法为：

animation: name duration timing-function delay iteration-count direction;

css
/*加入动画*/
/*
    动画名字
    动画完成时间
    动画执行次数  infinite 无限次
    动画延时执行时间
    (
        动画执行函数 ： 与过渡里面是一样的
    )
*/
animation:myname 10s infinite 1s ;

3.动画animation的子属性 ​

1.animation-name: myname; ​

调用动画关键帧，==规定需要和keyframes的名字一致==

2.animation-duration: s|ms; ​

动画完成==一个周期所需要的时间==

3.animation-timing-function: linear; ​

规定动画的速度变化类型

其参数值为：

bash
linear: 动画匀速执行
ease:   慢速开始，然后加速执行，最后以低速结束
ease-in:   以慢速开始
ease-out:   以慢速结束
ease-in-out:   以慢速开始和结束

4.animation-delay: s|ms ; ​

播放之前的延迟时间

5.animation-iteration-count: 数值|infinite; ​

播放次数(循环次数)

infinite表示无限次播放，数字n表示n次播放

6.animation-direction: normal|alternate; ​

动画播放方向

normal 为默认值，表示正常播放

alternate 表示轮流播放，动画会先正向播放，再反向播放

8.animation-fill-mode: forwards; ​

动画停在最后一帧

默认值为none

9.animation-play-state: paused|running; ​

属性规定动画正在运行还是暂停

默认值为running

可以写在hover中：

css
#box:hover{
    /*动画暂停属性，鼠标放上去就暂停*/
    animation-play-state: paused;
}

4.实例 ​

实例1：轮播图 ​

html
<body>
    <div id="banner">
        <div id="box">
            <img src="./img/79fcbe74418c46bd92e2f70b0fb6ae1a.jpg" alt="">
            <img src="./img/adb8e75c166b46a982c719a5c37c462c.jpg" alt="">
            <img src="./img/e555f947d2d84a809aabfd8ea55948c7.jpg" alt="">
            <img src="./img/e5359b073d1e4044a43dee0deba10ed8.jpg" alt="">
        </div>
    </div>
</body>
css
<style>
    body{
        padding: 0px;
        margin:0px;
    }
    #banner{
        width: 2100px;
        border:1px solid blue;
        height:400px;
        overflow: hidden;
    }
    #box{
        border: 5px solid #000;
        width:8400px;
        height: 400px;
        /*加入动画*/
        /*
            动画名字
            动画完成时间
            动画执行次数  infinite 无限次
            动画延时执行时间
            (
                动画执行函数  过渡是一样的

            )
        */
        animation:myname 10s infinite 1s ;
    }
    #box>img{
        float:left;
    }

    @keyframes myname {
        35%{
            margin-left:-2100px;
        }
        70%{
            margin-left: -4200px;
        }
        100%{
            margin-left: -6300px;
        }
    }
</style>

实例2：下划线动态效果的导航 ​

image-20221012221505884image-20221012221537390
css
.top-nav a:after {
    content: ' ';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    display: block;
    width: 165px;
    height: 1px; /*当做1px的border*/
    transform: translate(-50%);
}

.top-nav a:hover:after {
    height: 2px;
    animation: ad_width .5s linear forwards;
    background: #ff8a00;
}

@keyframes ad_width {
    from {
        width: 0
    }
    to {
        width: 165px
    }
}

其实这个还可以定位一个div（span）当border使用，然后靠scale缩放也是一样的效果，看自己喜欢了。