html+css基础：27、动画(基本使用/其他属性/动画复合属性/动画与过渡区别/动画案例)-北京尧图网络

动画的基本使用/其他属性/动画复合属性/动画与过渡区别/动画案例等Ⅰ、基本使用animation-name: wangyoudong2;/animation-duration: 3s;/animation-delay: 0.2s;其一、代码为其二、结果为Ⅱ、其他属性animation-timing-function: linear;/animation-iteration-count: infinite;/animation-direction: alternate;/animation-fill-mode: forwards;/animation-play-state: paused;其一、代码为其二、结果为Ⅲ、动画的复合属性animation: forwards 3s 0.5s alternate-reverse linear 2 athome;其一、代码为其二、结果为Ⅳ、动画与过渡的区别transition: 3s linear;/animation: athome 3s linear forwards;其一、代码为其二、结果为Ⅴ、动画案例animation: bike 1s steps(31) infinite;其一、代码为其二、结果为Ⅵ、小结Ⅰ、基本使用animation-name: wangyoudong2;/animation-duration: 3s;/animation-delay: 0.2s;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title01_基本使用/titlestyle.outer{width:1000px;height:100px;border:1px solid black;}/* 定义一个动画定义一组关键帧—— 第一种方式 */keyframeswangyoudong{/* 第一帧 */from{}/* 最后一帧 */to{transform:translate(900px);background-color:red;}}/* 定义一个动画定义一组关键帧—— 第二种方式 */keyframeswangyoudong2{/* 第一帧 */0%{}/* 29% { background-color: red; } *//* 48% { background-color: orange; } *//* 88% { background-color: yellow; } *//* 最后一帧 */100%{transform:translate(900px)rotate(360deg);background-color:purple;border-radius:50%;}}.inner{width:100px;height:100px;background-color:deepskyblue;/* 应用动画到元素 *//* 此时的 animation-name 属性表示要应用的动画名称 */animation-name:wangyoudong2;/* 动画持续的时间 *//* 此时的 animation-duration 属性表示动画的持续时间 */animation-duration:3s;/* 动画延迟时间 *//* 此时的 animation-delay 属性表示动画的延迟时间 */animation-delay:0.2s;}/style/headbodydivclassouterdivclassinner/div/div/body/html其二、结果为//一进入页面后的页面//动画执行过程// 最终结果Ⅱ、其他属性animation-timing-function: linear;/animation-iteration-count: infinite;/animation-direction: alternate;/animation-fill-mode: forwards;/animation-play-state: paused;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title02_其他属性/titlestyle.outer{width:1000px;height:100px;border:1px solid black;}keyframesathome{from{}to{transform:translate(900px)rotate(360deg);background-color:purple;border-radius:50%;}}.inner{width:100px;height:100px;background-color:deepskyblue;/* 应用动画到元素 */animation-name:athome;/* 动画持续的时间 */animation-duration:3s;/* 动画延迟时间 */animation-delay:0.2s;/* ********其他属性--start*********** *//* 设置动画的方式 *//* 此时的 animation-timing-function 属性表示动画的方式 */animation-timing-function:linear;/* 动画播放的次数 *//* 此时的 animation-iteration-count 属性表示动画播放的次数 */animation-iteration-count:infinite;/* 动画的方向 *//* 此时的 animation-direction 属性表示动画的方向 */animation-direction:alternate;/* 动画以外的状态不发生动画的时候在哪里 *//* 此时的 animation-fill-mode 属性表示动画以外的状态 *//* animation-fill-mode: forwards; */}.outer:hover .inner{/* 动画的播放状态 *//* 此时的 animation-play-state 属性表示动画的播放状态 */animation-play-state:paused;}/style/headbodydivclassouterdivclassinner/div/div/body/html其二、结果为//一进入页面后的页面// 该动画支持反复移动//hover之后动画暂停Ⅲ、动画的复合属性animation: forwards 3s 0.5s alternate-reverse linear 2 athome;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title03_动画的复合属性/titlestyle.outer{width:1000px;height:100px;border:1px solid black;}keyframesathome{from{}to{transform:translate(900px)rotate(360deg);background-color:purple;border-radius:50%;}}.inner{width:100px;height:100px;background-color:deepskyblue;/* 动画的复合属性第一个属性值表示 animation-fill-mode 第二个属性值表示 animation-duration 第三个属性值表示 animation-delay 第四个属性值表示 animation-direction 第五个属性值表示 animation-timing-function 第六个属性值表示 animation-iteration-count 第七个属性值表示 animation-name */animation:forwards 3s 0.5s alternate-reverse linear 2 athome;}.outer:hover .inner{/* 动画的播放状态 *//* 此时的 animation-play-state 属性表示动画的播放状态 */animation-play-state:paused;}/style/headbodydivclassouterdivclassinner/div/div/body/html其二、结果为//一进入页面后的页面// 该动画支持反复移动(2s内)//hover之后动画暂停// 最终结果Ⅳ、动画与过渡的区别transition: 3s linear;/animation: athome 3s linear forwards;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title04_动画与过渡的区别/titlestyle.outer{width:1000px;height:200px;border:1px solid black;}.inner{width:100px;height:100px;}/* 用过渡实现inner1跑到右边去 */.inner1{background-color:orange;/* 过渡效果第一个属性值表示过渡的持续时间第二个属性值表示过渡的方式 */transition:3s linear;}.outer:hover .inner1{transform:translate(900px);}/* 用动画实现inner2跑到右边去 */keyframesathome{0%{}50%{background-color:red;border-radius:50%;box-shadow:0px 0px 20px black;}100%{transform:translate(900px);}}.inner2{background-color:green;/* 动画效果第一个属性值表示动画名称第二个属性值表示持续时间第三个属性值表示 timing-function第四个属性值表示 fill-mode */animation:athome 3s linear forwards;}/style/headbodydivclassouterdivclassinner inner1过渡/divdivclassinner inner2动画/div/div/body/html其二、结果为//一进入页面后的页面//hover之后过渡效果才开始而动画效果已结束// 最终结果Ⅴ、动画案例animation: bike 1s steps(31) infinite;其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title05_动画案例/titlestylediv{width:130px;height:130px;background-image:url(../images/bike.png);margin:0 auto;margin-top:100px;/* 使用动画第一个属性值表示动画名称第二个属性值表示持续时间第三个属性值表示 steps(31)第四个属性值表示 iteration-count 其中 steps(31) 表示动画的帧数31表示有31帧steps()表示每一帧的间隔时间是一样的 */animation:bike 1ssteps(31)infinite;}keyframesbike{from{}to{background-position:0px -4030px;}}/style/headbodydiv/div/body/html其二、结果为//一进入页面后的页面骑车的动态效果Ⅵ、小结其一、哪里有不对或不合适的地方还请大佬们多多指点和交流其二、若有转发或引用本文章内容请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易且行且珍惜其三、有兴趣的话可以多多关注这个专栏(Vue(Vue2Vue3)面试必备专栏)(直接点击下面 url 跳转)https://blog.csdn.net/weixin_43405300/category_11525646.html?spm1001.2014.3001.5482**其四、再有兴趣的话也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)[https://blog.csdn.net/weixin_43405300/category_12654744.html?spm1001.2014.3001.5482](https://blog.csdn.net/weixin_43405300/category_12654744.htm

html+css基础：27、动画(基本使用/其他属性/动画复合属性/动画与过渡区别/动画案例)

相关推荐

如何在一分钟以内完成 3DGS 训练？LiteGS：面向 3D 高斯泼溅的系统算法高性能框架计算机视觉技术原理

ROS 参数与配置：把“配置项“从代码里外置（六）

stm32F103C8T6标准库综合实验二感应灯具(RD03雷达)

更多资讯

计算机整数表示：补码原理与编程实践

电-热-气-碳多能流耦合调度模型优化实践

Selenium自动化测试实战：从原理到企业级应用

Windows下编译Nginx完整指南：MSVC+OpenSSL+PCRE+zlib静态链接实战

AI如何优化跨境电商选品与物流成本控制

Oracle 11.2.0.1 补丁避坑：OPatch 报错、启动与回滚排查

今日更新

猫狗目标检测数据集：VOC/COCO/YOLO三格式一体化实战包

HDU2017多校标程复现：算法竞赛工程化真题沙盒

Codex Sandbox 隔离环境拆解：AI Agent 的临时实验室如何运作

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？