CSS3动画效果详解

CSS3动画

在CSS3中,animation属性用于实现元素的动画。

animation属性跟transition属性在功能实现上是非常相似的,都是通过改变元素的属性值来实现动画效果。但是,这两者实际上有着本质的区别

  • 对于transition属性来说,它只能将元素的某一个属性从一个属性值过渡到另一个属性值
  • 对于animation属性来说,它可以将元素的某一个属性从第1个属性值过渡到第2个属性值,然后还可以继续过渡到第3个属性值,以此类推。

从以上推断出:transition属性(即CSS3过渡)只能实现一次性的动画效果,而animation属性(即CSS3动画)可以实现连续性的动画效果

CSS3中的animation属性就是为了解决这些问题而提出的。animation属性可以通过控制关键帧来控制动画的每一步,从而实现更为复杂的动画效果。

使用animation属性实现CSS3动画需要两步

  • 定义动画:用@keyframes规则来定义动画的样式
  • 调用动画:用animation属性来调用@keyframes规则定义的动画

使用@keyframes规则创建动画

概念:在CSS3中,使用@keyframes规则来创建动画。创建动画是指从一个CSS样式到另一个CSS样式逐步变化而产生动画效果的过程。在创建动画中,可以多次更改CSS样式的设定。

一个动画由很多画面组成,每一个画面叫做一帧。其中,角色或者物体运动变化的关键动作所处的帧叫做关键帧。创建动画必须定义关键帧。

语法:

@keyframes animation_name{keyframes-selector{css-styles;}
}

属性值说明

属性值说明
animation当前动画的名称,它将作为引用该动画时的唯一标识,因此不能为空
keyframes-selector关键帧选择器,指定当前关键帧在整个动画过程中的位置,其值可以是from和to,或者百分比。其中,from和0%效果相同(表示动画的开始),to和100%效果相同(表示动画的结束)
css-style定义执行到当前关键帧时对应的动画状态,由CSS样式属性进行定义,多个属性之间用分号(;)分隔,且属性不能为空。

实例:仅定义开头和结尾

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>@keyframes创建动画</title><style>*{padding:0;margin:0;}div{width:200px;height:150px;margin:20px auto;border-radius:20px;background-color:blueviolet;}/* 定义动画 */@keyframes colorChange{0%{background-color:blueviolet;}100%{background-color:greenyellow;}}/* 调用动画,这里可以先看后面 */div:hover{animation:colorChange 2s linear 0s 5 normal;}</style></head><body><div class="a"></div></body>
</html>

运行结果

请添加图片描述

实例:定义多个关键帧

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>@keyframes创建动画</title><style>*{padding:0;margin:0;}div{width:200px;height:150px;margin:20px auto;border-radius:50%;background-color:darkblue;cursor:pointer;}/* 定义动画 */@keyframes colorChange{0%{background-color:darkblue;}25%{background:radial-gradient(circle at top,orange 20%,yellow 40%);}50%{background:radial-gradient(circle at center,orange 20%,yellow 40%);}75%{background:radial-gradient(circle at bottom,orange 20%,yellow 40%);}100%{background-color:red;}}/* 调用动画 */div:hover{animation:colorChange 5s linear;}</style></head><body><div class="a"></div></body>
</html>

运行结果
请添加图片描述

@keyframes其中的百分比是“持续时间”。在实例:定义多个关键帧中,定义持续时间为5s,则0%指的是0s时,25%指的是1.25s,50%指的是2.5s,75%指的是3.75s,100%指的是5s.

使用animation属性调用动画

概念:CSS3中的animation属性用于调用由@keyframes规则创建的动画

animation属性是一个复合属性,主要包括6个子属性。

属性值说明
animation-name对于指定CSS属性进行进行操作
animation-duration动画的持续时间
animation-timing-function动画的速率变化方式
animation-delay动画的延迟时间
animation-iteration-count动画的播放次数
animation-direction动画的播放方向,正向还是反向

动画名称:animation-name

概念:animation-name属性用于定义要调用的由@keyframes规则创建的动画名称。调用多个动画名称要以逗号隔开。

语法:

anination-name:keyframename|none;

属性值

属性值说明
none默认值,表示不应用任何动画,该设置也可以用于取消动画
keyframename用于定义要调用的动画名称。多个动画名称以英文逗号隔开

animation-name调用的动画名需要和@keyframes规则定义的动画名完全一致(区分大小写),如果不一致将不会产生任何动画效果。

注意:在animation属性上指定多个以逗号分隔的值时,它们会将根据值的数量以不同的方式分配给animation-name属性指定的动画。

持续时间:animation-duration

概念:animation-duration属性用于定义完成一个动画周期所需要的时间。

语法:

animation-duration:time;

属性值

属性值说明
time它表示以秒(s)或毫秒(ms)为单位的时间。默认值为0,表示没有任何动画效果。当该参数的值为负数时,则被视为0。

动画方式:animation-timing-function

概念:animation-timing-function属性用来定义动画的速度曲线。“速度曲线”,指的是动画执行过程中的速度变化情况

语法:

animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值

属性值说明速率
linear规定以相同速度开始至结束的过渡效果,即”匀速“在这里插入图片描述
ease默认值,规定慢速开始,变快之后慢速结束的过渡效果在这里插入图片描述
ease-in规定速度越来越快的过渡效果在这里插入图片描述
ease-out规定速度越来越慢的过渡效果在这里插入图片描述
ease-in-out规定以慢速开始和结束的过渡效果在这里插入图片描述
cubic-bezier(n.n,n,n)在cubic-bezier函数中自定义值,参数是0~1的数值

说明:animation-timing-function属性取值跟CSS3过渡的transition-timing-function是一样的

延迟时间:animation-delay

概念:animation-delay属性用来定义执行动画之前等待的时间,即指的是规定动画什么时候开始

语法:

animation-delay:time;

属性值

属性值说明
time它表示以秒(s)或毫秒(ms)为单位的时间。默认值为0,表示不延迟(不等待)

播放次数:animation-iteration-count

概念:animation-iteration-count属性用来定义动画的播放次数

语法:

animation-iteration-count:number|infinite;

属性值

属性值说明
number表示动画重复的次数。默认值为1,即指的是动画默认只播放1次。若属性值为一个整数,则规定动画播放次数。若属性值为一个非整数值,则表示播放动画循环的一部分。例如,0.5s将动画只播放一半。负值是无效的。
infinite表示动画无限次循环播放

说明:animation-iteration-count属性可以指定一个或多个以逗号分隔的值

播放方向:animation-direction

概念:animation-direction属性用来定义动画的播放方向

语法:

animation-direction:normal|alternate;

属性值

属性值说明
normal默认值,表示动画每次都顺向播放
reverse表示动画每次都反方向播放
alternate表示动画会在奇数次(1次,3次,5次等)顺向播放,但在偶数次(2次,4次,6次等)逆向播放。

实例:loading效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">*{padding:0;margin:0;}.contain{width:100px;margin:20px auto;position:relative;}.contain>i{position:absolute;top:0;width:5px;height:40px;background-color:blueviolet;border-radius:6px;}/*定义动画*/@keyframes loading{0%{transform:scaleY(1);}50%{transform:scaleY(0.5);}100%{transform:scaleY(1);}}/*第1个i元素*/.contain>i:nth-child(1){left: 0;animation-name:loading;animation-duration:1s;animation-timing-function:ease-in;animation-delay:0.1s;animation-iteration-count:infinite;}/*第2个i元素*/.contain>i:nth-child(2){left: 10px;animation-name:loading;animation-duration:1s;animation-timing-function:ease-in;animation-delay:0.3s;animation-iteration-count:infinite;}/*第3个i元素*/.contain>i:nth-child(3){left: 20px;animation-name:loading;animation-duration:1s;animation-timing-function:ease-in;animation-delay:0.6s;animation-iteration-count:infinite;}/*第4个i元素*/.contain>i:nth-child(4) {left: 30px;animation-name:loading;animation-duration:1s;animation-timing-function:ease-in;animation-delay:0.3s;animation-iteration-count:infinite;}</style>
</head>
<body><div class="contain"><i></i><i></i><i></i><i></i></div>
</body>
</html>

运行结果
请添加图片描述

播放状态:animation-play-state

概念:animation-play-state属性用来定义动画的播放状态

语法:

animation-play-state:running|paused;

属性值

属性值说明
running默认值,表示是动画正在播放中
paused表示动画已被暂停

animation属性

概念:animation属性是一个复合属性,可以将以上单项动画子属性在一行内进行复合设置。简写以上繁琐的属性。

语法:

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

说明:定义animation属性时必须指定animation-name和animation-duration属性,否则没有动画,或者动画持续时间默认为0,不会播放动画,其余子属性可省略。

实例:loading效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">*{padding:0;margin:0;}.contain{width:100px;margin:20px auto;position:relative;}.contain>i{position:absolute;top:0;width:5px;height:40px;background-color:blueviolet;border-radius:6px;}/*定义动画*/@keyframes loading{0%{transform:scaleY(1);}50%{transform:scaleY(0.5);}100%{transform:scaleY(1);}}/*第1个i元素*/.contain>i:nth-child(1){left: 0;animation: loading 1s ease-in 0.1s infinite;}/*第2个i元素*/.contain>i:nth-child(2){left: 10px;animation: loading 1s ease-in 0.3s infinite;}/*第3个i元素*/.contain>i:nth-child(3){left: 20px;animation: loading 1s ease-in 0.6s infinite;}/*第4个i元素*/.contain>i:nth-child(4) {left: 30px;animation: loading 1s ease-in 0.3s infinite;}</style>
</head>
<body><div class="contain"><i></i><i></i><i></i><i></i></div>
</body>
</html>

运行结果

请添加图片描述

从效果上来看,这两者是等价的。相比较用animation属性的子属性,直接使用animation复合属性上更加简洁清楚。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/619315.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PADS 改变图纸和图页边界大小

PADS 改变图纸和图页边界大小 有时候画一画原理图发现画布不够用了&#xff0c;可改变图纸大小&#xff0c;对应的改变图页边界 若图页边界怎么选择都改变不了&#xff0c;可将途中图页边界删除&#xff0c;重新加载 选择对应的图页边距就好啦 分类: PADS

重学Java 4 进制转换和位运算

天赋不好好使用的话&#xff0c;可是会被收回的哦 ——24.1.13 一、进制转换 1.常用的进制 2.十进制和二进制之间的转换 1.十进制转二进制 辗转相除法——循环除以2&#xff0c;取余数&#xff0c;除到商为0为止&#xff0c;除完后&#xff0c;由下往上&#xff0c;得出换算后…

虚拟主机 如何上传大于100M的文件 php网站程序

问题 虚拟主机上传文件大小限制100m&#xff0c; 有时会遇到非常大的文件上传&#xff0c;上传过程中耗时非常久&#xff0c; 可能服务器的限制设置了上传文件尺寸&#xff0c;返回“413 request entity too large” 整体逻辑 前端&#xff1a;上传文件时&#xff0c;进行文…

C语言——内存函数【memcpy,memmove,memset,memcmp】

&#x1f4dd;前言&#xff1a; 在之前的文章C语言——字符函数和字符串函数&#xff08;一&#xff09;中我们学习过strcpy和strcat等用来实现字符串赋值和追加的函数&#xff0c;那么除了字符内容&#xff0c;其他的数据&#xff08;例如整型&#xff09;能否被复制或者移动呢…

Docker 镜像

1、联合文件系统 UnionFS&#xff08;联合文件系统)&#xff1a;Union文件系统〈UnionFS)是一种分层、轻量级并且高性能的文件系统&#xff0c;它支持对文件系统的修改作为一次提交来一层层的叠加&#xff0c;同时可以将不同目录挂载到同一个虚拟文件系统下(unite several dir…

CCF认证+蓝桥杯习题训练

贪心 *上取整公式* *代码展示* #include <iostream> #include <cstring> #include <algorithm>using namespace std;const int N 1e5 10;typedef long long LL;int v[N] , a[N];int main() {int n , d;cin >> n >> d;for(int i 1 ; i < n…

函数式编程 - 组合compose的使用方法

函数式编程中有一个比较重要的概念就是函数组合&#xff08;compose&#xff09;,组合多个函数&#xff0c;同时返回一个新的函数。调用时&#xff0c;组合函数按顺序从右向左执行。右边函数调用后&#xff0c;返回的结果&#xff0c;作为左边函数的参数传入&#xff0c;严格保…

工业级安卓PDA超高频读写器手持掌上电脑,RFID电子标签读写器

掌上电脑&#xff0c;又称为PDA。工业级PDA的特点就是坚固&#xff0c;耐用&#xff0c;可以用在很多环境比较恶劣的地方。 随着技术的不断发展&#xff0c;加快了数字化发展趋势&#xff0c;RFID技术就是RFID射频识别及技术&#xff0c;作为一种新兴的非接触式的自动识别技术&…

python处理目录下文本文件去除空格和空行

一&#xff1a;实现思路&#xff1a; 要想实现去除某个目录下所有txt文件的空格&#xff0c;需要循环遍历一个目录下的所有文件&#xff0c; 获取文件的每行数据去除空格以后&#xff0c;重新保存数据到当前当前文件中。 处理空格,我们使用正则&#xff0c;这样可以去除字符串…

Java并查集设计以及路径压缩实现

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 并查集是一种树型的数据结构 &#xff0c;并查集可以高效地进行如下操作&#xff1a; 查询元素p和元素q是否属于同一组合并元素p和元素q所在的组 1、并查集的结构 并查集也是一种树型结构&#xff0c;但这棵树跟我们之…

uniapp 如何使用echarts 以及解决tooltip自定义不生效问题

使用的是echarts-for-wx插件&#xff1b; 正常写法案例&#xff1a;给tooltip数值加个% <template><view><uni-ec-canvas class"uni-ec-canvas"id"uni-ec-canvas"ref"canvas"canvas-id"uni-ec-canvas":ec"ec&quo…

【数据库】sql优化有哪些?从query层面和数据库层面分析

目录 归纳sql本身的优化数据库层面的优化 归纳 这类型问题可以称为&#xff1a;Query Optimization&#xff0c;从清华AI4DB的paper list中&#xff0c;该类问题大致可以分为&#xff1a; Query RewriterCardinality EstimationCost EstimationPlan Optimization 从中文的角…

SkipList 的索引过程,能否越两级搜索

“SkipList 的索引过程&#xff0c;能否越两级搜索&#xff1f;” 昨天&#xff0c;一个工作 7 年的粉丝&#xff0c;去某外包公司面试&#xff0c;被问到这个问题不知道该怎么回答。 今天正好有空&#xff0c;给大家分享一下这个问题的回答思路。 对了&#xff0c;这个问题…

ZooKeeper 实战(四) Curator Watch事件监听

文章目录 ZooKeeper 实战(四) Curator Watch事件监听0.前言1.Watch 事件监听概念2.NodeCache2.1.全参构造器参数2.2.代码DEMO2.3.日志输出 3.PathChildrenCache3.1.全参构造器参数3.2.子节点监听时间类型3.2.代码DEMO 4.TreeCache4.1.构造器参数4.2.代码DEMO4.3.日志输出 ZooKe…

Flink(十二)【容错机制】

前言 最近已经放假了&#xff0c;但是一直在忙一个很重要的自己的一个项目&#xff0c;用 JavaFX 和一个大数据组件联合开发一个功能&#xff0c;也算不枉我学了一次 JavaFX&#xff0c;收获很大&#xff0c;JavaFX 它作为一个 GUI 开发语言&#xff0c;本质还是 Java&#xff…

MSF流量加密

1、背景介绍 在MSF中生成shell&#xff0c;并上线运行时。都是通过http https tcp等协议传输。虽然MSF本身会对流量进行加密&#xff0c;但MSF太出名以致于其加密特征容易被IPS&#xff0c;WAF等可以检测带有攻击的特征的设备拦截或记录。 2、生成 SSL 证书 openssl req -x50…

关于运维·关于数据库面试题

目录 一、数据库类型 二、数据库引擎 三、mysql数据库类型 四、mysql的约束添加 五、主从复制原理 六、主从方式有几种 七、mysql主从数据不一致的原因 八、mysql的优化 九、什么是事务的特征 十、数据库读写分离的好处 十一、怎样优化sql语句 十二、mysql的同步方…

谷粒商城-商品服务-品牌管理-阿里云云存储+JSR303数字校验+统一异常处理

阿里云云存储OSS 分布式系统上传文件 分布式系统上传文件 单体应用上传&#xff1a;上传文件到服务器&#xff0c;想获取文件时再向服务器发请求获取文件。 分布式系统上传&#xff1a; 因为有多台服务器&#xff0c;为防止负载均衡导致获取文件时没找到对应的服务器&#xf…

实用编程调试技巧

目录 一、调试的基本步骤 二、Debug和Release的介绍 三、Windows环境调试介绍 1.调试环境的准备 2.学会快捷键 最常用的几个快捷键&#xff1a; 断点应用举例&#xff1a; 3.调试的时候查看程序当前信息 &#xff08;1&#xff09…

GitHub注册新账号的操作流程(详细)

目录 第一步 进入官网&#xff0c;点击右上角的"Sign up" 第二步 输入email地址 第三步 设置密码 第四步 输入昵称 第五步 根据个人喜好决定要不要接收GitHub的邮件推送。然后回答他们的验证问题 第六步 输入验证码 我在注册github账号时遇到过一些阻碍&#x…