前端研习录（12）——动画效果讲解及示例说明

最新推荐文章于 2024-06-07 16:01:04 发布

清风不渡

最新推荐文章于 2024-06-07 16:01:04 发布

阅读量371

点赞数

分类专栏：前端研习录文章标签：前端 css3 css

本文链接：https://blog.csdn.net/WXKKang/article/details/126090111

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（12）——动画效果讲解及示例说明

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

一、动画

重拾前端记忆，记录学习笔记，现在进入CSS动画效果部分

1、定义

动画是使元素从一种样式逐渐变为另一种样式的效果
可以指定多个动画效果或者多个次数
可以使用百分比来规定发生变化的时间占比，或者from和to（相当于0%和100%）
0%是动画的开始，100%是动画的结束

2、创建动画

使用@keyframes规则即可创建动画，语法如下：

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

name 动画名称，可自定义
percent 百分比值，可添加多个百分比值

2、执行动画

可以通过定义animation属性来执行动画，语法如下：

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

name 需要引用的动画名称
duration 动画持续时间
timing-function 动画执行的速（ease：逐渐变慢(默认) | linear：匀速 | ease-in：加速 | ease-out：减速 | ease-in-out：先加速后减速）
delay 动画开始执行的时间（可设置延时执行）
iteration-count 动画循环次数，infinite为无限次数的循环
direction 动画循环播放的方向（normal：向前播放(默认) | alternate：第偶次数向前播放，第奇次数反向播放）
animation-play-state 控制动画的播放状态：running代表播放，paused代表停止播放

示例如下：

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

    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: aqua;
            animation: demo 3s linear 0s infinite;
        }

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

        @keyframes demo{
            0%{
                background-color: green;
            }
            25%{
                background-color: yellow;
            }
            100%{
                background-color: red;
            }
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果如下，运行可以看到box由绿—黄—红进行无限次循环播放，鼠标悬停到box上则暂停播放：
在这里插入图片描述

清风不渡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端研习录（12）——动画效果讲解及示例说明

动画是使元素从一种样式逐渐变为另一种样式的效果可以指定多个动画效果或者多个次数可以使用百分比来规定发生变化的时间占比，或者from和to（相当于0%和100%）0%是动画的开始，100%是动画的结束。...
复制链接

扫一扫