CSS3动画效果详解

news2024/11/14 20:04:43

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.coloradmin.cn/o/1380952.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring创建的单例对象，存在线程安全问题吗？

Spring创建的单例对象，存在线程安全问题吗？

这个问题涉及到Spring框架中的Bean的作用域、单例模式的线程安全性以及如何判断和处理线程安全问题。让我们一步步深入探讨这些概念。 Spring Bean的作用域 Spring提供了几种不同的Bean作用域&#xff0c;包括&#xff1a; 1、 Singleton&#xff08;单例&#xff09;&#x…
阅读更多...
linux软件安装（yum命令）

linux软件安装（yum命令）

1.Linux系统的应用商店 操作系统安装软件有许多种方式&#xff0c;一般分为&#xff1a; 下载安装包自行安装 如win系统使用exe文件、msi文件等如mac系统使用dmg文件、pkg文件等 系统的应用商店内安装 如win系统有Microsoft Store商店如mac系统有AppStore商店 Linux命令行…
阅读更多...
阳光保险选择OceanBase稳定运行超700天

阳光保险选择OceanBase稳定运行超700天

阳光保险集团成立于 2005 年 7 月&#xff0c;旗下拥有财产保险、人寿保险、信用保证保险、资产管理等多家专业子公司&#xff0c;是全球市场化企业中成长最快的集团公司之一&#xff0c;目前位列中国保险行业前八。随着数字化升级趋势的不断加速&#xff0c;很多企业产生将软硬…
阅读更多...
并发编程之ReentrantReadWriteLock详解

并发编程之ReentrantReadWriteLock详解

目录 ReentrantReadWriteLock介绍 线程进入读锁的前提条件 线程进入写锁的前提条件 ReentrantReadWriteLock三个重要的特性 ReentrantReadWriteLock类 ReentrantReadWriteLock使用读写锁 锁降级 注意事项 ReentrantReadWriteLock结构 ReentrantReadWriteLock读写状态设…
阅读更多...
Github上传代码/删除仓库/新建分支的操作流程记录

Github上传代码/删除仓库/新建分支的操作流程记录

首先先安装git&#xff0c;安装完git后&#xff0c;看如下操作指令&#xff1a; 输入自己的用户名和邮箱&#xff08;为注册GITHUB账号时的用户名和邮箱&#xff09;&#xff1a; git config --global user.name "HJX-exoskeleton" git config --global user.email …
阅读更多...
Kafka基本介绍

Kafka基本介绍

消息队列 产生背景 消息队列&#xff1a;指的数据在一个容器中&#xff0c;从容器中一端传递到另一端的过程 消息(message): 指的是数据&#xff0c;只不过这个数据存在一定流动状态 队列(queue): 指的容器&#xff0c;可以存储数据&#xff0c;只不过这个容器具备FIFO(先进…
阅读更多...
Mysql事务的处理

Mysql事务的处理

1、事务&#xff0c;就是一组命令的操作。 不过这一组命令&#xff0c;我们有时候需要使用手动提交&#xff1b; 1、使用这组命令可以查询出来现在的提交方式&#xff1a;自动提交&#xff08;就是命令输入&#xff0c;点击enter后&#xff0c;会不会直接对表格产生修改&#x…
阅读更多...
x-cmd pkg | csview - 美观且高性能的 csv 数据查看工具

x-cmd pkg | csview - 美观且高性能的 csv 数据查看工具

目录 介绍首次用户功能特点类似工具与竞品进一步阅读 介绍 csview 是一个用于在命令行中查看 CSV 文件的工具&#xff0c;采用 Rust 语言编写的&#xff0c;支持中日韩/表情符号。它允许用户在终端中以表格形式查看 CSV 数据&#xff0c;可以对数据进行排序、过滤、搜索等操作…
阅读更多...
关于html导出word总结一

关于html导出word总结一

总结 测试结果不理想&#xff0c;html-to-docx 和 html-docx-js 最终导出的结果 都 差强人意&#xff0c;效果可以见末尾的附图 环境 "electron": "24.3.0" 依赖库 html-docx-js html-docx-js - npm html-to-docx html-to-docx - npm file-saver…
阅读更多...
Linux技术，winSCP连接服务器超时故障解决方案

Linux技术，winSCP连接服务器超时故障解决方案

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; 故障现象 使用 sftp 协议连接主机时, 明显感觉缓慢且卡顿,并且时常出现如下报错: 点击重新连接后,又有概率重新连接上; 总之在"连接上"和&…
阅读更多...
前端js调用Lodop实现云打印

前端js调用Lodop实现云打印

一、下载Lodop控件 官网&#xff1a;下载中心 - Lodop和C-Lodop官网主站 二、解压后安装 双击进行安装&#xff0c;里面有些页面文件是一些教程案例 勾选云服务工作模式 安装成功会自动启动 浏览器访问地址&#xff1a;http://localhost:8000/ 首页最下面有个教程案例跳转地址&…
阅读更多...
kali_linux换源教程

kali_linux换源教程

vim /etc/apt/sources.list #阿里云deb http://mirrors.aliyun.com/kali kali-rolling main non-free contribdeb-src http://mirrors.aliyun.com/kali kali-rolling main non-free contrib#清华大学源deb http://mirrors.tuna.tsinghua.edu.cn/kali kali-rolling main contrib…
阅读更多...
navicat for oracle

navicat for oracle

前言 Oracle中的概念并不是创建数据库&#xff0c;而是创建一个表空间&#xff0c;然后再创建一个用户&#xff0c;设置该用户的默认表空间为我们新创建的表空间&#xff0c;这些操作之后&#xff0c;便和你之前用过的mysql数据库创建完数据库一模一样了。 创建数据库 使用O…
阅读更多...
PHP信息分类网源码带手机端和文档

PHP信息分类网源码带手机端和文档

PHP信息分类网源码带手机端和文档 安装简易说明&#xff1a; 上传 → 安装 → 进入后台 → 恢复数据 → 修改cookie记录值&#xff08;第3点有说明&#xff09; 1.上传程序到网站根目录,访问http://域名/install/index.php 进行安装,不要直接打开网址&#xff0c;先直接安装&am…
阅读更多...
Java学习手册——第六篇输入输出

Java学习手册——第六篇输入输出

几乎所有的开发语言都会有输入输出&#xff0c;程序的定义里面也有输入输出&#xff0c;可以见得输入输出是何等的重要。如果没有输入&#xff0c;人类如何与计算机交流&#xff1f;如果没有输出&#xff0c;一切努力都是白费&#xff0c;因为我们看不到结果。 这里的输入输出你…
阅读更多...
常用计算电磁学算法特性与电磁软件分析

常用计算电磁学算法特性与电磁软件分析

常用计算电磁学算法特性与电磁软件分析 参考网站&#xff1a; 计算电磁学三大数值算法FDTD、FEM、MOM ADS、HFSS、CST 优缺点和应用范围详细教程 ## 基于时域有限差分法的FDTD的计算电磁学算法&#xff08;含Matlab代码&#xff09;-框架介绍 参考书籍&#xff1a;The finite…
阅读更多...
Multi-Concept Customization of Text-to-Image Diffusion——【代码复现】

Multi-Concept Customization of Text-to-Image Diffusion——【代码复现】

本文是发表于CVPR 2023上的一篇论文&#xff1a;[2212.04488] Multi-Concept Customization of Text-to-Image Diffusion (arxiv.org) 一、引言 本文主要做的工作是对stable-diffusion的预训练模型进行微调&#xff0c;需要的显存相对较多&#xff0c;论文中测试时是在两块GP…
阅读更多...
原子操作类原理剖析

原子操作类原理剖析

UC包提供了一系列的原子性操作类&#xff0c;这些类都是使用非阻塞算法CAS实现的&#xff0c;相比使用锁实现原子性操作这在性能上有很大提高。 由于原子性操作类的原理都大致相同&#xff0c;所以只讲解最简单的AtomicLong类的实现原理以及JDK8中新增的LongAdder和LongAccumu…
阅读更多...
领导风格测试

领导风格测试

领导风格指的是管理者在开展管理工作时的思维和行为模式&#xff0c;通常我们也称之为习惯&#xff0c;或者是人格特征。这种习惯是固化的&#xff0c;是长期的经历所形成的&#xff0c;其中包含了个人的知识&#xff0c;经验&#xff0c;人际关系等。领导风格测试是企业人才选…
阅读更多...
必练的100道C语言程序设计练习题（上）

必练的100道C语言程序设计练习题（上）

前言: 在计算机编程的世界中&#xff0c;C语言一直是一门备受推崇的语言。它的简洁性、高效性以及广泛应用使得学习C语言成为每一位程序员的必由之路。然而&#xff0c;掌握这门语言并不是一蹴而就的事情&#xff0c;它需要不断的练习和实践。为了帮助各位编程爱好者更好地理解…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023