CSS3_动画(九)

devtools/2024/11/17 12:06:58/

动画

  • animation-name:动画名称
  • animation-duration:动画持续时间
  • animation-delay:动画开始延迟时间
  • keyframes两种定义方式可以混用,但最好不要混用。
1 简单应用
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>简单应用</title><style>css">.outer {height: 100px;width: 900px;border: 1px solid black;}.inner1 {height: 100px;width: 100px;background-color: aqua;float: left;animation-name: moveRight1;animation-duration: 2.5s;/* animation-delay: 0.5s; */}.inner2 {height: 100px;width: 100px;background-color: aquamarine;float: right;animation-name: moveRight2;animation-duration: 2.5s;}@keyframes moveRight1 {/* 第一帧 */from {}/* 最后一帧 */to {transform: translate(800px);}}@keyframes moveRight2 {0% {}50% {background-color: yellowgreen;}100% {background-color: blueviolet;transform: translate(-800px) rotate(720deg);border-radius: 50%;}}</style>
</head><body><div class="outer"><div class="inner1"></div><div class="inner2"></div></div>
</body></html>
2 其他属性
  • animation-timing-function(动画播放方式):与过渡属性一致;
  • animation-iteration-count(动画循环次数):
    • number:循环次数;
    • infinite:无限循环。
  • animation-direction(动画方向):
    • normal:默认,正方向;
    • reverse:反方向;
    • alternate:先正方向运行再反方向运行,持续交替运行;
    • alternate-reverse:先反方向运行再正方向运行,持续交替运行。
  • animation-fill-mode(动画停止位置):
    • forwards:动画停止位置;
    • backwards:动画开始位置。
  • animation-play-state(动画播放状态):
    • running:运动,默认属性;
    • paused:暂停
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>其他属性</title><style>css">.outer {height: 100px;width: 900px;border: 1px solid black;}.inner {height: 100px;width: 100px;background-color: aqua;animation-name: moveRight;animation-duration: 2.5s;animation-delay: 1s;/* 动画播放方式,与过渡一样 */animation-timing-function: linear;/* 动画播放次数,infinite为无限循环 */animation-iteration-count: infinite;/* 动画播放方向,alternate */animation-direction: alternate;/* 动画停止位置,forwords为最后一帧的位置 *//* animation-fill-mode: forwards; */}.outer:hover .inner {/* 动画播放状态 */animation-play-state: paused;}@keyframes moveRight {/* 第一帧 */from {}/* 最后一帧 */to {background-color: blueviolet;transform: translate(800px) rotate(720deg);border-radius: 50%;}}</style>
</head><body><div class="outer"><div class="inner"></div></div>
</body></html>
3 动画复合属性

在复合属性中,两个时间设置有先后顺序,分别为duration和delay,其他属性没有数量和顺序要求。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>复合属性</title><style>css">.outer {height: 100px;width: 900px;border: 1px solid black;}.inner {height: 100px;width: 100px;background-color: aqua;animation: moveRight 2.5s 0.5s linear 3 alternate forwards;}.outer:hover .inner {/* 动画播放状态 */animation-play-state: paused;}@keyframes moveRight {/* 第一帧 */from {}/* 最后一帧 */to {background-color: blueviolet;transform: translate(800px) rotate(720deg);border-radius: 50%;}}</style>
</head><body><div class="outer"><div class="inner"></div></div>
</body></html>

http://www.ppmy.cn/devtools/134688.html

相关文章

springboot 文件高效上传

文件上传功能可以说对于后端服务是必须的&#xff0c;不同场景对文件上传的要求也各不相同&#xff0c;有的追求速度&#xff0c;有的注重稳定性&#xff0c;还有的需要考虑文件大小和安全性。所以便有了秒传、断点续传和分片上传等解决方案。 1、总述 秒传 秒传&#xff0c…

Android fragment ,在Activity崩溃的时候,fragment碎片就会重叠,这样处理,完美

在Activity使用fragment 中&#xff0c;有时候为了减少内存分配&#xff0c;采用hide和show的方法加载&#xff0c;这样能省很多内存&#xff0c;但是在碰见意外bug时候&#xff0c;fragment会重叠&#xff1b; 这样处理&#xff1a; 在Activity 的oncreate方法中&#xff0c;…

系统思考—跳出症状看全局

在深圳圆满结束了两天的《系统思考》公开课&#xff0c;和来自不同企业的管理者们一起度过了充实又深刻的学习时光。 这两天&#xff0c;我们探讨了如何从“头痛医头”的短视思维&#xff0c;转向深层次的系统思考&#xff1b;从局部优化到全局视角&#xff0c;看清企业背后真…

Gin 中自定义控制器

1、控制器分组 当我们的项目比较大的时候有必要对我们的控制器进行分组 新建 controller/admin/NewsController.go package admin import ( "net/http" "github.com/gin-gonic/gin" )

26-ES集群搭建、身份认证配置

虚机搭建 添加es用户 elasticsearch 默认不允许root用户启动&#xff0c;所以需要创建es用户 useradd elasticsearch passwd elasticsearch 解压安装包 #解压es tar -xvzf elasticsearch-7.14.2-linux-x86_64.tar.gz 将文件夹赋予es用户权限 #将文件夹赋予es用户权限 sud…

ctfshow-web入门-SSTI(web369-web372)下

目录 1、web369 2、web370 3、web371 4、web372 1、web369 完全过滤了 request 双大括号也过滤了 包括前面的单双引号、中括号、下划线都是过滤了的 能构造出一些东西 调用属性&#xff1a; ?name{%set gl(((lipsum|string|list).pop(18))~((lipsum|string|list).pop(18…

使用React和Vite构建一个AirBnb Experiences克隆网站

这一篇文章中&#xff0c;我会教你如何做一个AirBnb Experiences的克隆网站。主要涵盖React中Props的使用。 克隆网站最终呈现的效果&#xff1a; 1. 使用vite构建基础框架 npm create vitelatestcd airbnb-project npm install npm run dev2. 构建网站的3个部分 网站从上…

在MATLAB中导入TXT文件的若干方法

这是一篇关于如何在MATLAB中导入TXT文件的文章&#xff0c;包括示例代码和详细说明 文章目录 在MATLAB中导入TXT文件1. 使用readtable函数导入TXT文件示例代码说明 2. 使用load函数导入TXT文件示例代码说明 3. 使用importdata函数导入TXT文件示例代码说明 4. 自定义导入选项示例…