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

    前端研习录（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 样式
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

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

  • 相关阅读:
    【算法基础】高精度运算
    java File、io篇
    微信小程序问题汇总
    基于Jeecgboot前后端分离的ERP系统开发数据库设计（二）
    Python安装
    [密码学入门]凯撒密码(Caesar Cipher)
    肖sir___面试就业课__非技术面试题
    神舟十四号航天员成功出舱
    【Matplotlib】matplotlib库 中 pyplot.scatter() 的使用
    android 控制台打印出app启动时间的命令
  • 原文地址：https://blog.csdn.net/WXKKang/article/details/126090111