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复合属性上更加简洁清楚。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

CMake在静态库中链接动态库

CMake在静态库中链接动态库

hehedalinux:~/Linux/multi-v3$ tree . ├── calc │ ├── add.cpp │ ├── CMakeLists.txt │ ├── div.cpp │ ├── mult.cpp │ └── sub.cpp ├── CMakeLists.txt ├── include │ ├── calc.h │ └── sort.h ├── sort │ ├── …
阅读更多...
Android中集成FFmpeg及NDK基础知识

Android中集成FFmpeg及NDK基础知识

前言 在日常App开发中,难免有些功能是需要借助NDK来完成的,比如现在常见的音视频处理等,今天就以ffmpeg入手,来学习下Android NDK开发的套路. JNI和NDK 很多人并不清除JNI和NDK的概念,经常搞混这两样东西,先来看看它们各自的定义吧. JNI和NDK 很多人并不清除JNI和NDK的概念…
阅读更多...
14-部署Kafkasource和KafkaChannel

14-部署Kafkasource和KafkaChannel

部署KafkaSource KafkaSource负责将Kafka中的消息记录转为CloudEvents 仅在需要从Kafka中加载消息并提供给Knative Eventing上的应用程序使用时才需要KafkaSource 命令&#xff1a; kubectl apply -f https://github.com/knative-extensions/eventing-kafka-broker/releases/…
阅读更多...
确保CentOS系统中的静态HTTP服务器的数据安全

确保CentOS系统中的静态HTTP服务器的数据安全

确保CentOS系统中的静态HTTP服务器的数据安全是一项重要的任务&#xff0c;它有助于保护网站免受未经授权的访问、数据泄露和其他安全威胁。以下是一些关键步骤和最佳实践&#xff0c;以确保CentOS系统中静态HTTP服务器的数据安全&#xff1a; 限制访问权限确保只有授权用户可…
阅读更多...
【教程】微信小程序如何拍摄图片及视频并上传到后台进行存储

【教程】微信小程序如何拍摄图片及视频并上传到后台进行存储

需求分析 在微信小程序中需要使用手机拍摄照片以及视频上传到后台进行进一步的操作&#xff0c;需要解决以下两个问题&#xff1a; 微信小程序如何拍摄照片及视频如何将拍摄的照片及视频上传到后台进行存储 解决方案 前端开发&#xff1a;微信小程序原生 后端开发&#xf…
阅读更多...
【分布式技术】监控平台zabbix自定义模板、设置邮件报警、导入模板

【分布式技术】监控平台zabbix自定义模板、设置邮件报警、导入模板

目录 案例&#xff1a;监控当前登录人数&#xff0c;超过3人触发报警发送邮件 第一步&#xff1a;自定义模板 1、明确想要获取监控数据的命令和脚本 ​编辑 2、在被监控主机上&#xff0c;修改zabbix agent2的配置文件或者在zabbix agent2的配置文件目录中添加以.conf结尾…
阅读更多...
前端八股文（性能优化篇）

前端八股文（性能优化篇）

目录 1.CDN的概念 2.CDN的作用 3.CDN的原理 4.CDN的使用场景 5.懒加载的概念 6.懒加载的特点 7.懒加载的实现原理 8.懒加载与预加载的区别 9.回流与重绘的概念及触发条件 &#xff08;1&#xff09;回流 &#xff08;2&#xff09;重绘 10. 如何避免回流与重绘&#…
阅读更多...
视频剪辑达人分享：批量减片时时长并调整播放倍速的技巧

视频剪辑达人分享：批量减片时时长并调整播放倍速的技巧

在视频剪辑中&#xff0c;经常要对多个视频片段进行时长调整和播放倍速的修改。如果一个个手动操作&#xff0c;不仅效率低下&#xff0c;还容易出错。如何快速批量处理这些片段呢&#xff1f;现在一起来看看云炫AI智剪批量减片时长并调整播放的具体步骤。 原视频和剪辑后的视…
阅读更多...
【国内访问github不稳定】可以尝试fastgithub解决这个问题

【国内访问github不稳定】可以尝试fastgithub解决这个问题

1、下载 https://github.com/dotnetcore/FastGithub https://github.com/dotnetcore/FastGithub/releases 官网下载即可&#xff0c;比如&#xff0c;我用的是这个&#xff1a;fastgithub_osx-x64.zip&#xff08;点这里下载&#xff09; 2、安装 如下图双击启动即可 3、…
阅读更多...
Android14实战：打破音频默认重采样的限制(五十二)

Android14实战：打破音频默认重采样的限制(五十二)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言： 人生从来没有捷径，只…
阅读更多...
PMP学习考试经验总结

PMP学习考试经验总结

PMP备考日程计划表 我的PMP的备考大概花了三个月的时间, 可以分为以下几个阶段&#xff1a; Week 1-4: 读完PMBoK 前面7个知识领域&#xff08;中英文版PMBoK一起看&#xff09;。每看完一个知识领域&#xff0c;就看参考书里面的相应章节&#xff08;汪博士那本&#xff09;…
阅读更多...
Android Lint的使用

Android Lint的使用

代码检查方式一&#xff1a; Android Studio使用Lint进行代码检查 找到Analyze目录下的Inspect Code检查代码选项点击然后弹出下面这个框框&#xff0c;在这个列表选项中我们可以选择Inspect Code的范围&#xff0c;点击OK 待分析完毕后&#xff0c;我们可以在Inspection栏目中…
阅读更多...
element-ui 如何修改el-popconfirm的样式

element-ui 如何修改el-popconfirm的样式

改造之前效果 改造之后效果 代码&#xff1a; <style lang"scss"> .my-popconfirm {width: 92% !important;height: 130px !important;padding: 14px !important;font-size: 28px !important;.el-popper {font-size: 28px !important;}.el-popconfirm__main {…
阅读更多...
[C#]利用paddleocr进行表格识别

[C#]利用paddleocr进行表格识别

【官方框架地址】 https://github.com/PaddlePaddle/PaddleOCR.git 【算法介绍】 PaddleOCR表格识别是PaddlePaddle开源项目中的一个强大功能&#xff0c;它利用深度学习技术实现了对各类表格的高精度识别。PaddleOCR表格识别能够处理各种复杂的表格&#xff0c;包括但不限于…
阅读更多...
wpf使用Popup封装数据筛选框--粉丝专栏

wpf使用Popup封装数据筛选框--粉丝专栏

类似于DevExpress控件的功能 这是DevExpress的winform筛选样式&#xff0c;如下&#xff1a; 这是DevExpress的wpf筛选样式&#xff0c;如下&#xff1a; 这是Excel的筛选样式&#xff0c;如下&#xff1a; 先看效果 本案例使用wpf原生控件封装&#xff0c;功能基本上都满足…
阅读更多...
【JaveWeb教程】（24） Mybatis入门之Mybatis配置与SQL语句编写 详细代码示例讲解（最全面）

【JaveWeb教程】（24） Mybatis入门之Mybatis配置与SQL语句编写 详细代码示例讲解（最全面）

目录 Mybatis入门前言1. 快速入门1.1 入门程序分析1.2 入门程序实现1.2.1 准备工作1.2.1.1 创建springboot工程1.2.1.2 数据准备 1.2.2 配置Mybatis1.2.3 编写SQL语句1.2.4 单元测试 1.3 解决SQL警告与提示 Mybatis入门 前言 在前面我们学习MySQL数据库时&#xff0c;都是利用…
阅读更多...
微信小程序canvas画布实现元素缩放、移动、自由绘制源代码

微信小程序canvas画布实现元素缩放、移动、自由绘制源代码

微信小程序画布实现矩形元素缩放 效果图&#xff1a; 源代码&#xff1a; https://download.csdn.net/download/tl437002770/88722028 微信小程序画布实现矩形元素自由移动 效果图&#xff1a; 源代码&#xff1a; https://download.csdn.net/download/tl437002770/887220…
阅读更多...
继续理解Nacos的CP和AP架构模型！

继续理解Nacos的CP和AP架构模型！

本篇文章延续文章“如何理解Nacos册CP和AP架构模型”&#xff0c;大家可以配套一起学习。 Nacos注册中心处理HTTP注册请求 在文章“如何理解Nacos册CP和AP架构模型”中已经提到过&#xff0c;Nacos注册中心用Restful API InstanceController的方法register()处理HTTP类型的注…
阅读更多...
SpringBoot项目里用MultipartFile作为入参获取到的file为什么null

SpringBoot项目里用MultipartFile作为入参获取到的file为什么null

前言&#xff1a; 最近在项目中用到了Excel模板导入功能&#xff0c;但是在测试阶段用Postman测试时&#xff0c;通过Post请求&#xff0c;传到后端的File一直为null。其中前端传参和请求都没问题&#xff0c;后端的接参也没问题&#xff0c;问题出在过滤器的复用上。 问题场…
阅读更多...
Docker五部曲之一：容器术语介绍

Docker五部曲之一：容器术语介绍

文章目录 前言背景基本术语容器镜像容器镜像格式容器引擎容器容器主机注册中心容器编排 进阶术语容器运行时镜像层标签存储库名称空间 参考 前言 本文内容翻译自参考文献。 背景 要理解容器术语&#xff0c;重要的是要精确地理解容器是什么。容器实际上是两个不同的东西。像…
阅读更多...
最新文章

Copyright @ 2022~2023