呼唤创意大师：用CSS Animation和@keyframes设计引人入胜的网页动画

ai_todo

已于 2023-07-25 16:36:15 修改

阅读量144

点赞数

文章标签： css 前端

于 2023-07-25 16:33:00 首次发布

本文链接：https://blog.csdn.net/m0_49768044/article/details/131921022

版权

在这里插入图片描述

文章目录

📈「作者简介」：不知名十八线技术博主
📚「推荐主页」：阿珊和她的猫
🕐「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app

1. 概述

animation是CSS的一个属性，用于创建动画效果。
@keyframes是一个CSS规则，用于定义动画的关键帧。

2. `animation`属性

animation-name：指定要应用的@keyframes动画的名称。
animation-duration：指定动画的持续时间。
animation-timing-function：指定动画的时间函数，用于定义动画的加速和减速效果。
animation-delay：指定动画开始之前的延迟时间。
animation-iteration-count：指定动画的重复次数。
animation-direction：指定动画是否应该反向播放。
animation-fill-mode：指定动画完成后应用的样式。
animation-play-state：指定动画的播放状态。

3. `@keyframes`规则

@keyframes规则用于定义动画的关键帧。
关键帧是动画过程中的不同状态，通过在@keyframes规则中定义多个关键帧，可以创建平滑过渡的动画效果。
关键帧定义了在动画进行中不同时间点的样式状态。
可以使用百分比或关键字（如"from"和"to"）来定义关键帧。

4. `@keyframes`语法

@keyframes规则包含动画名称和一系列关键帧。
每个关键帧定义了一个时间点和对应的样式。
关键帧可以使用百分比或关键字来定义时间点。
每个关键帧可以包含多个CSS属性和对应的值。

5. 实例

创建一个简单的@keyframes动画。
定义多个关键帧，指定动画在不同时间点的样式状态。
使用animation属性将动画应用到元素上。

6. 动画填充模式（animation-fill-mode）

animation-fill-mode属性指定在动画之前和之后应用的样式。
可选值包括none、forwards、backwards和both。

7. 动画属性示例

使用animation和@keyframes创建常见的动画效果，如淡入淡出、旋转、平移等。

8. 动画事件

animationstart：动画开始时触发。
animationend：动画结束时触发。
animationiteration：动画每次重复时触发。

以上包含了animation和@keyframes的基本概念、属性和用法。它们提供了在CSS中创建各种动画效果的能力，通过定义关键帧和调整动画属性，可以实现丰富和吸引人的动态效果。

9.实战案例（来自牛客）

要求当滑动id为"range"的滑块控件时可以改变id为"rect"的矩形旋转速度。要求如下：

id为"rect"的矩形初始动画周期为10秒
id为"range"的滑块控件默认值为1、最小值为、最大值为10、滑动间隔为1
当滑动滑块值为1时，矩形动画周期为10秒、当…，为…、当滑动滑块值为10时，矩形动画周期为1秒
注意：
必须使用DOM0级标准事件（onchange）

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            #rect {
                width: 120px;
                height: 100px;
                background-color: black;
                /*补全代码*/
                /*1. id为"rect"的矩形初始动画周期为10秒*/
                animation:rect 10s linear infinite ;            }
            @keyframes rect {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <!-- 补全代码 -->
        <!-- 要求当滑动id为"range"的滑块控件时可以改变id为"rect"的矩形旋转速度 -->
    	<div id="rect"></div>
        <input id="range" />
        
        <script type="text/javascript">
            // 补全代码
            // 2.id为"range"的滑块控件默认值为1、最小值为、最大值为10、滑动间隔为1
            // 3.当滑动滑块值为1时，矩形动画周期为10秒、当...，为...、当滑动滑块值为10时，矩形动画周期为1秒
             document.querySelector("#range").onchange = function(){
                let inputVal = document.querySelector('#range').value;
                let time = 10 - inputVal + 1;
                let rect = document.querySelector("#rect");
                rect.style.animationDuration = time + 's';
            }
            
        </script>
    </body>
</html>