CSS3动画（秒懂创建与使用动画）

目录

一、介绍

CSS3 @keyframes 规则

1.概念

2.好处

3.特点

4.用法

 二、使用

1.定义关键帧（Keyframes）：

2.应用动画：

3.可选的动画控制属性：

4.实现动画效果的优化：

三、动画属性

四、实例说明

五、总结

一、介绍

CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

1.概念

CSS动画是指通过CSS样式表中的属性和关键帧来控制元素的外观或位置，从而创建动态效果。它基于关键帧（keyframes）的概念，其中定义了元素在动画过程中的不同状态。

2.好处

  1. 性能优化： CSS动画通常比JavaScript动画更加高效，因为它们是由浏览器原生支持的，可以通过GPU加速进行处理，从而提高性能。
  2. 简单易用： 使用CSS动画相对于JavaScript来说更简单，不需要编写复杂的代码，只需要通过简单的CSS样式就可以实现各种动画效果。
  3. 响应式设计： CSS动画可以很容易地与响应式设计相结合，根据不同的屏幕大小和设备类型提供不同的动画效果。
  4. 可维护性： 通过CSS动画，可以将动画效果与样式表分离，使得代码更易于维护和管理。

3.特点

  1. 关键帧定义： CSS动画通过在关键帧中定义元素的不同状态来控制动画的过程。
  2. 过渡效果： 可以定义动画的过渡效果，例如线性、缓入缓出等。
  3. 可控性： 开发者可以通过调整关键帧的时间和属性来控制动画的速度和效果。
  4. 浏览器支持： CSS动画得到了现代浏览器的广泛支持，包括Chrome、Firefox、Safari等主流浏览器。

4.用法

  1. 定义关键帧： 使用 @keyframes 关键字定义关键帧，并指定动画效果的起始状态和结束状态。
  2. 应用动画： 使用 animation 属性将动画应用到元素上，并指定动画的名称、时长、过渡效果等。
  3. 可选的动画属性： 可以使用其他CSS属性来进一步控制动画效果，如 animation-delay、animation-iteration-count、animation-direction 等。

 二、使用

1.定义关键帧（Keyframes）：

使用 @keyframes 规则定义动画的关键帧，即描述动画在不同时间点的状态。关键帧规则中包含了动画的起始状态（0%）和结束状态（100%），以及可能的中间状态。

@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

2.应用动画：

将定义好的关键帧动画应用到目标元素上，通过 animation 属性设置动画的名称、时长、过渡效果、延迟等。

.element {
  animation: slidein 2s ease-in-out 1s infinite alternate;
}

这里的 slidein 是之前定义的关键帧动画名称，2s 是动画持续的时间，ease-in-out 是动画的时间函数，1s 是动画延迟开始的时间，infinite 表示动画无限循环播放，alternate 表示动画在每次重复播放时交替反向播放。

3.可选的动画控制属性：

使用其他动画控制属性可以进一步调整动画的效果，如 animation-delay 控制动画延迟开始时间，animation-fill-mode 控制动画执行前后元素样式的状态等。 

.element {
  animation-delay: 1s;
  animation-fill-mode: both;
}

 animation-delay 设置了动画延迟1秒开始，animation-fill-mode: both; 设置了动画结束后元素应该保持动画最后一帧的状态。

4.实现动画效果的优化：

在设计和实现动画效果时，需要考虑性能优化和用户体验。避免过于复杂或频繁的动画效果，以免影响页面性能和用户体验。

.element {
  will-change: transform; /* 提前告诉浏览器元素会发生变化，优化动画性能 */
}

使用 will-change 属性可以提前告知浏览器哪些属性将会发生变化，从而优化动画性能。

三、动画属性

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3

四、实例说明

1.运行myfirst动画，设置所有的属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:myfirst;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:running;
	/* Safari and Chrome: */
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

2.与上面的动画相同，但是使用了简写的动画 animation 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation:myfirst 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 5s linear 2s infinite alternate;
	/* Opera: */
	-o-animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

五、总结

CSS动画是通过CSS样式表来创建动态效果的技术。以下是关于CSS动画的一些要点总结：

  1. 关键帧动画（Keyframe Animation）： 使用 @keyframes 规则定义动画的关键帧，描述动画在不同时间点的状态。

  2. 动画属性（Animation Properties）： 使用 animation 属性将动画应用到元素上，包括动画名称、持续时间、时间函数、延迟等。

  3. 动画控制属性（Animation Control Properties）： 使用 animation-delay、animation-iteration-count、animation-direction 等属性控制动画的延迟、重复次数、方向等。

  4. 过渡动画（Transition Animation）： 使用 transition 属性在元素状态改变时实现平滑过渡效果，定义过渡的属性、持续时间、时间函数等。

  5. 性能优化（Performance Optimization）： 通过合理使用动画属性、减少复杂度和频率、优化渲染性能等手段提高动画性能。

  6. 交互性动画（Interactive Animation）： 使用CSS伪类和JavaScript结合实现交互性动画效果，例如悬停、点击等触发的动画。

  7. 适应性（Adaptiveness）： CSS动画可以与响应式设计结合，根据不同设备或屏幕尺寸提供不同的动画效果。

  8. 可维护性（Maintainability）： 将动画效果与样式表分离，使用模块化的方式定义和管理动画，提高代码的可维护性。

综上所述，CSS动画是一种简单、灵活且性能高效的前端技术，能够为网页提供各种各样的动态效果，增强用户体验并且易于实现和维护。

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

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

相关文章

Leetcode 53. 最大子数组和

Leetcode 53. 最大子数组和

心路历程&#xff1a; 子数组的和是可以通过前面的和加上当前值递推获得&#xff0c;所以可以用动态规划解决这道题 注意的点&#xff1a; 1、这道题再获取最大值时res不能用0而需要用负无穷初始化 解法&#xff1a;动态规划 class Solution:def maxSubArray(self, nums: …
阅读更多...
（十三）C++自制植物大战僵尸游戏多用户存档实现（二）

（十三）C++自制植物大战僵尸游戏多用户存档实现（二）

植物大战僵尸游戏开发教程专栏地址http://t.csdnimg.cn/8UFMs UserData.h 在头文件中定义了枚举类型openUserDataReturnType&#xff0c;用于表示打开用户数据文件的返回状态。FileExistError表示文件存在但是打开错误&#xff0c;FileExistCorrect表示文件在且正确&#xff0…
阅读更多...
Python | Leetcode Python题解之第29题两数相除

Python | Leetcode Python题解之第29题两数相除

题目&#xff1a; 题解&#xff1a; class Solution:def divide(self, dividend: int, divisor: int) -> int:INT_MIN, INT_MAX -2**31, 2**31 - 1# 考虑被除数为最小值的情况if dividend INT_MIN:if divisor 1:return INT_MINif divisor -1:return INT_MAX# 考虑除数为…
阅读更多...
Pandas数据分析学习笔记

Pandas数据分析学习笔记

前言 开刷Pandas数据分析&#xff0c;看起来很好理解&#xff0c;不过没做笔记没敲代码心里总是不安稳&#xff0c;所以复现下课程代码并演示其中遇到的问题&#xff0c;顺便水一水笔记好了 参考资料&#xff1a; 课程视频链接&#xff1a;Pandas数据分析从入门到实战 数据…
阅读更多...
Halo自定义页面

Halo自定义页面

在使用Halo后台维护项目&#xff0c;有的页面是固定的&#xff0c;但内容需要一些自定义样式&#xff0c;内容动态编辑生成&#xff0c;这个时候就需要自定义页面; Halo版本 版本&#xff1a;2.121.首先在theme.yaml中添加自定义页面并指定文件名 spec:customTemplates:page:…
阅读更多...
面试题集中营—GC日志简析及频繁GC的调优

面试题集中营—GC日志简析及频繁GC的调优

如何查看GC日志 有两种方式查看GC日志&#xff0c;一种是动态命令行查看 jstat -gc <pid> 300 5 第二种就是在JVM参数中增加打印的参数&#xff0c;如下&#xff1a; -XX:PrintGCDetails -XX:PrintGCTimeStamps 表示打印每次GC的日志以及GC发生的时间 -Xloggc:gc.log …
阅读更多...
如何解决PPT中获取加载项是灰色的，无法链接到Power BI的问题？

如何解决PPT中获取加载项是灰色的，无法链接到Power BI的问题？

问题描述&#xff1a; 最近有朋友留言询问:“在尝试之前我发布的如何在PPT中展示Power BI报告的操作步骤的时候&#xff0c;想要在PPT中展示Power BI报告&#xff1f;只需这样做&#xff01; (qq.com) 碰到在PowerPoint中【获取加载项选项】是灰色&#xff0c;无法链加载Powe…
阅读更多...
WordPress网站上添加看板娘

WordPress网站上添加看板娘

续接上篇——基于LNMP部署wordpress-CSDN博客 目录 一.下载并解压 二.设置头文件 修改header.php 修改配置文件footer.php 三.将你设置的主题包上传到/usr/share/nginx/html/wp-content这个目录里 四.扩展——将看板娘修改到左侧 一.下载并解压 [rootaliyun ~]# wget htt…
阅读更多...
技术分享 | app测试中常用的Android模拟器

技术分享 | app测试中常用的Android模拟器

Emulator Emualor 是 Android Studio 自带的模拟器&#xff0c;是官方提供的工具&#xff0c;Android 开发最常使用的就是这一款。 它功能非常齐全&#xff0c;电话本、通话等功能都可正常使用。用户可以使用键盘输入&#xff0c;鼠标点击模拟器按键输入&#xff0c;甚至还可…
阅读更多...
安卓投屏延时数据如何测试，测试工具如何写？

安卓投屏延时数据如何测试，测试工具如何写？

背景&#xff1a; 投屏其实在android等使用场景非常非常多&#xff0c;比如现在火爆小米汽车的车机&#xff0c;上面涉及到手机和车机互联画面相关都是属于投屏范围。这种跨设备的投屏场景&#xff0c;流畅的体验是最重要的&#xff0c;这里就会要求投屏中最重要的一个性能指标…
阅读更多...
Nerf技术原理

Nerf技术原理

Neural Radiance Fields (NeRF) 是一种3D场景重建技术，用于从一组稀疏的2D图像创建高质量的3D模型。这一技术基于深度学习，通过训练一个神经网络来模拟场景的体积密度和颜色分布，实现在新的视角下渲染出高质量的3D图像。 NeRF的核心原理 NeRF的核心在于使用一个全连接的神经…
阅读更多...
开源事件通知库libevent及网络连接管理模块bufferevent详解

开源事件通知库libevent及网络连接管理模块bufferevent详解

目录 1、libevent介绍 1.1、什么是libevent&#xff1f; 1.2、libevent特点 1.3、网络连接管理模块bufferevent 2、bufferevent有什么用&#xff1f; 3、bufferevent的整体设计与实现细节 3.1、整体概况 3.2、evbuffer与bufferevent 3.3、defer callback 4、bufferev…
阅读更多...
听说英伟达和诺和诺德要共建医药研发超算，超算安腾默默笑了

听说英伟达和诺和诺德要共建医药研发超算，超算安腾默默笑了

继黄仁勋公开发表“生命科学才是未来”的观点后&#xff0c;英伟达押注生物计算赛道又有新动作。日前&#xff0c;诺和诺德基金会宣布将出资和英伟达合作&#xff0c;在丹麦建造一台专注于生成式AI应用的超级计算机&#xff0c;以推动医疗保健、生命科学和绿色转型领域的研究与…
阅读更多...
【JavaSE进阶】08-反射机制 09-注解

【JavaSE进阶】08-反射机制 09-注解

1 反射机制 a) 反射的基本概念 b) Java中的类反射 c) 安全性和反射 d) 反射的两个缺点 1.1 反射的基本概念 反射的概念是由 Smith 在 1982 年首次提出的&#xff0c;主要是指程序可以访问、检测和修改它本身状 态或行为的一种能力, 并能根据自身行为的状态和结果&#…
阅读更多...
六、项目发布 -- 2. 数据库环境准备

六、项目发布 -- 2. 数据库环境准备

之前我们是采用mock方式获取这些接口&#xff0c;也就是这些接口的数据其实是固定的&#xff0c;现在我们将从数据库中来获取这些数据并且在界面上进行展示。 1、数据库环境准备 到MYSQL官网上&#xff0c;主要下载服务端&#xff0c;社区版是免费的&#xff0c;安装好MYSQL …
阅读更多...
结构体（C语言）

结构体（C语言）

“点赞&#xff0c;留言&#xff0c;收藏&#xff0c;关注” 就是对阿林最大的支持 1.自定义类型 什么是自定义类型&#xff1f;C语言中有一些自带的数据类型&#xff0c;比如说char&#xff0c;int&#xff0c;float&#xff0c;double&#xff0c;long等数据类型就是C语言的…
阅读更多...
目标检测——标注鱼类数据集

目标检测——标注鱼类数据集

一、重要性及意义 鱼类的检测在多个领域都表现出其重要性和意义。以下是几个主要方面的阐述&#xff1a; 首先&#xff0c;从食品安全和营养价值的角度来看&#xff0c;鱼类作为人们日常生活中的重要蛋白质来源&#xff0c;其质量和安全性备受关注。鱼类营养成分检测能够评估…
阅读更多...
C++异步回调示例：多线程执行任务，主线程通过回调监测任务状态

C++异步回调示例：多线程执行任务，主线程通过回调监测任务状态

1、回调函数 回调函数定义&#xff1a;把函数的指针或者地址作为参数传递给另一个参数&#xff0c;当这个指针被用来调用其所指向的函数时&#xff0c;那么这就是一个回调的过程&#xff0c;这个被回调的函数就是回调函数。回调函数不是由该函数的实现方直接调用&#xff0c;而…
阅读更多...
反转二叉树（力扣226）

反转二叉树（力扣226）

解题思路&#xff1a;用队列进行前序遍历的同时把节点的左节点和右节点交换 具体代码如下&#xff1a; class Solution { public:TreeNode* invertTree(TreeNode* root) {if (root NULL) return root;swap(root->left, root->right); // 中invertTree(root->left)…
阅读更多...
oracle 数据库 迁移 mysql

oracle 数据库 迁移 mysql

将 Oracle 数据库迁移到 MySQL 是一项复杂的任务&#xff0c;因为这两种数据库管理系统具有不同的架构、语法和功能。下面是一个基本的迁移步骤&#xff0c;供你参考&#xff1a; 步骤一&#xff1a;评估和准备工作 1.评估数据库结构&#xff1a;仔细分析 Oracle 数据库的结构…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站