前端学习笔记80-动画

最新推荐文章于 2024-08-27 15:45:31 发布

小欣CZX

最新推荐文章于 2024-08-27 15:45:31 发布

阅读量108

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/116796138

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

本文详细介绍了如何使用CSS动画创建持续移动的元素，包括设置关键帧、动画名称、执行时间、延时、时序函数、执行次数、方向、播放状态和填充模式。通过实例展示了如何让元素不停地改变margin-left，并演示了动画填充模式的不同效果。

摘要由CSDN通过智能技术生成

前端学习笔记80-动画

动画

前面学的过渡只有在鼠标移入的时候才有效，所以如何做一个一直在动的呢？
用动画。

动画

动画和过渡类似，可以实现动态的效果，但是过渡需要在某个属性发生变化时才会触发，而动画则自动触发。

关键帧

设置动画效果，必须先要设置一个关键帧。

        @keyframes test {
            /* from表示动画的开始位置 */
            /* from 和 0% 是等价的 */
            from{
                margin-left: 0;
            }
            /* to表示的结束位置 */
            /* to 和100% 是等价的 */
            to{
                margin-left: 700px;
            }

为元素设置动画

用animation-name设置，前面设置的关键帧名字为test，所以这里写test。

        .box2{
            background-color: #bfa;
            animation-name: test;
            
        }

设置执行时间

        .box2{
            background-color: #bfa;
            animation-name: test;
            animation-duration: 2s;
        }

设置动画延时

        .box2{
            background-color: #bfa;
            animation-name: test;
            animation-duration: 2s;
            animation-delay: 2s;
        }

设置时序函数

        .box2{
            background-color: #bfa;
            animation-name: test;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-timing-function: ease-in-out;
        }

设置动画执行的次数

        .box2{
            background-color: #bfa;
            animation-name: test;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count:infinite;
        }

设置方向

未设置这个前，移动方向为从from到to。
animation-direction可以指定动画运行的方向。
可选值：
normal：默认值。从from到to，如果我设置的动画次数大于1，则到了to之后，直接跳到from，然后从from向to运行。
reverse：从to到from。
alternate：这个也是from到to，但是到了to之后，是从to到from运行回来。
alternate-reverse：和上一个相反，不过差不多。

        .box2{
            background-color: #bfa;
            animation-name: test;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count:infinite;
            animation-direction: alternate;
        }

设置动画的执行状态

animation-play-state
可选值：
running：默认值，动画执行。
paused：动画暂停。
可以写在hover里，这样鼠标移入就暂停动画。

        .box1:hover div{
            animation-play-state: paused;
        }

设置动画填充模式

animation-fill-mode
设置动画填充模式。
可选值：
none：默认值，动画执行完毕，元素回到初始位置。注意不是from。

        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            margin-left: 10px;
        }

我在这里给box1的子元素box2设置了10px的margin-left，所以回到的位置是10px，不是from的0。
forwards：动画执行完毕，元素会停在动画的结束位置。
backwards：动画延时等待时，元素处于from的状态。
为了体现这一点，改改背景颜色。
box2的背景颜色为：

background-color: #bfa;

然后在关键帧设置里设置背景颜色：

        @keyframes test {
            /* from表示动画的开始位置 */
            /* from 和 0% 是等价的 */
            from{
                margin-left: 0;
                background-color: orange;
            }
            /* to表示的结束位置 */
            /* to 和100% 是等价的 */
            to{
                margin-left: 700px;
                background-color: red;
            }

如果没有设置backwards，则在一开始的延时2s时间里，box2的颜色时#bfa；如果设置了backwards，则延时的2s时间里，颜色时orange。

both:结合了forwards和backwards的功能。

        .box2{
            background-color: #bfa;
            animation-name: test;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count:1;
            animation-direction: alternate;
            animation-fill-mode: both;
        }

整个代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }

        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            margin-left: 10px;
        }
        .box2{
            background-color: #bfa;
            animation-name: test;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count:1;
            animation-direction: alternate;
            animation-fill-mode: both;
        }
        .box1:hover div{
            animation-play-state: paused;
        }
        @keyframes test {
            /* from表示动画的开始位置 */
            /* from 和 0% 是等价的 */
            from{
                margin-left: 0;
                background-color: orange;
            }
            /* to表示的结束位置 */
            /* to 和100% 是等价的 */
            to{
                margin-left: 700px;
                background-color: red;
            }
        }
    </style>

</head>
<body>

    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>
</html>

小欣CZX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端学习笔记80-动画

前端学习笔记90-动画动画关键帧为元素设置动画设置执行时间设置动画延时设置时序函数设置动画执行的次数设置方向设置动画的执行状态设置动画填充模式整个代码前面学的过渡只有在鼠标移入的时候才有效，所以如何做一个一直在动的呢？用动画。动画动画和过渡类似，可以实现动态的效果，但是过渡需要在某个属性发生变化时才会触发，而动画则自动触发。关键帧设置动画效果，必须先要设置一个关键帧。 @keyframes test { /* from表示动画的开始位置 */
复制链接

扫一扫