程序员经验分享-hwhale

CSS3 动画效果总结

2023-05-16

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、transition以及animation。


transform

rotate

设置元素顺时针旋转的角度，用法是：

transform: rotate(x);

参数x必须是以deg结尾的角度数或0，可为负数表示反向。

scale

设置元素放大或缩小的倍数，用法包括：

transform: scale(a);                  元素x和y方向均缩放a倍

transform: scale(a, b);              元素x方向缩放a倍，y方向缩放b倍

transform: scaleX(a);                元素x方向缩放a倍，y方向不变

transform: scaleY(b);                元素y方向缩放b倍，x方向不变

translate

设置元素的位移，用法为：

transform: translate(a, b);                元素x方向位移a，y方向位移b

transform: translateX(a);                  元素x方向位移a，y方向不变

transform: translateY(b);                  元素y方向位移b，x方向不变

skew

设置元素倾斜的角度，用法包括：

transform: skew(a, b);              元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度b

transform: skewX(a);                元素x方向逆时针倾斜角度a，y方向不变

transform: skewY(b);                元素y方向顺时针倾斜角度b，想方向不变

以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。

matrix

设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。

origin

设置元素的悬挂点，用法包括：

transform-origin: a b;                元素的悬挂点为(a, b)

元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。


transition

transition-property

指定transition效果作用的CSS属性，其值是CSS属性名。

transition-duration

动画效果持续的时间，其值为以s结尾的秒数。

transition-timing-function

指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：


transition-delay

动画效果推迟开始执行的时间，其值为以s结尾的秒数。

CSS3动画的生命周期如下图所示，从中可以清楚的看出duration和delay之间的关系：



animation

CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的动画效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key  frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。

关键帧@keyframes的语法结构如下：

@keyframesNAME {

         a% {

         /*CSS属性*/

         }

         b% {

                  /*CSS属性*/

         }

         ...

}

NAME表示动画的名字；a%、b%表示以百分号结尾的百分数，用于设定该关键帧在动画生命周期中的位置；百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外，如果同一个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；并且关键帧在@keyframes中时无序的。

设置完关键帧后就可以继续设定animation了。


animation-name

指定选用的动画的名字，即keyframes中的NAME。

animation-duration

同transition-duration。

animation-timing-function

同transition-timing-function。

animation-delay

同transition-delay。

animation-iteration-count

设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。

animation-direction

设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放）。


前缀

因为CSS3还没有正式发布，所以各种浏览器对它的支持也不尽相同。所以在设置CSS3属性（包括@开头的新属性）的时候通常需要对其添加浏览器标识的前缀，如-webkit- 表示Webkit内核的浏览器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。无视IE吧，在IE上的实现通常还是要用到滤镜，而不是CSS3。


实例

下面的代码模拟了上述大部分的CSS3动画属性，由于只使用了–webkit- 前缀，所以只能在Chrome或Safari下正常运行。

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3动画</title>
<link type="text/css" rel="stylesheet" href="animation.css" />
</head>

<body>
<div class="rotate">rotate</div>
<div class="scale">scale</div>
<div class="translate">translate</div>
<div class="skew">skew</div>
<div class="origin">origin</div>
<div class="single">single property</div>
<div class="whole">whole property</div>
<div class="resume">change & resume</div>
<div class="animation">animation</div>
</body>
</html> 

CSS代码：

animation.css

div {
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #06F;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	-webkit-border-radius: 10px;
	margin: 5px;
}

.rotate {
	-webkit-transform: rotate(0deg);
}

.rotate:hover {
	-webkit-transform: rotate(90deg);
}

.scale {
	-webkit-transform: scale(1);
}

.scale:hover {
	-webkit-transform: scale(1.5);
}

.translate {
	-webkit-transform: translate(0px, 0px);
}

.translate:hover {
	-webkit-transform: translate(50px, 50px);
}

.skew {
	-webkit-transform: skew(0);
}

.skew:hover {
	-webkit-transform: skewY(20deg);
}

.origin {
	-webkit-transform-origin: top left;
	-webkit-transform: rotate(0);
}

.origin:hover {
	-webkit-transform: rotate(45deg);
}

.single {
	width: 150px;
}

.single:hover {
	background: #f00;
	width: 200px;
	height: 100px;
	line-height: 100px;
	-webkit-transition-property: background;
	-webkit-transition-duration: 2s;
}

.whole {
	width: 150px;
}

.whole:hover {
	width: 200px;
	height: 100px;
	line-height: 100px;
	background: #f00;
	-webkit-transition-duration: 2s;
}

.resume {
	width: 150px;
	-webkit-transition-duration: 2s;
}

.resume:hover {
	width: 200px;
	height: 100px;
	line-height: 100px;
	background: #f00;
	-webkit-transition-duration: 2s;
}

.animation:hover {
	-webkit-animation-name: anim;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes anim {
	0% {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background: #06F;
	}
	50% {
		width: 140px;
		height: 65px;
		line-height: 65px;
		background: #360;
	}
	100% {
		width: 200px;
		height: 100px;
		line-height: 100px;
		background: #f00;
	}
}


参考资料

http://www.qianduan.net/what-you-need-to-know-about-behavioral-css.html

http://www.w3cplus.com/content/css3-transition

http://www.w3cplus.com/content/css3-animation

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CSS3 动画效果总结 的相关文章

  • MATLAB即将跌出TOP 20，TIOBE 4月编程语言排行榜出炉

    CSDN 编者按 一月一次的编程语言排行榜出炉 xff01 责编 张红月 出品 CSDN xff08 ID xff1a CSDNnews xff09 在TIOBE发布的4月编程语言排行榜中 xff0c 知名数学算法分析语言MATLAB即将跌

  • python3 爬虫实战案例 （抓取淘宝信息）（淘宝加了搜索必须登录的验证，此方法所到的结果都是0）

    需求 xff1a 对比足球 xff0c 篮球 xff0c 乒乓球 xff0c 羽毛球 xff0c 网球 xff0c 相关物品的销售量保存到excle中 和抓取淘宝关键字相关信息的销售量 xff0c 这和之前抓取csdn网站浏览量取不同 xf

  • android studio中Gradle 编译需要重点注意gradle，wrapper，build tools之间的版本对应关系

    Android Studio 2 3 的平台已经已经是相对稳定的发布版 xff0c 新的功能不断推出 xff0c 包括对NDK 的完美支持 它看起来有一些重大的改变也正在等待合适的孵化时机 xff0c 如 xff1a 新的 Gradle 构

  • VNC Viewer 设置屏幕分辨率-解决屏幕分辨率问题

    先介绍一款好用的连接工具介绍一个 VNC连接工具 xff1a http fwqglgj iis7 net cp vnc tscc IIs7服务器管理工具可以批量连接并管理VNC服务器 作为服务器集成管理器 xff0c 它最优秀的功能就是批量

  • LAMP环境简单搭建

    一 简介 LAMP 是Linux Apache MySQL PHP的简写 xff0c 其实就是把Apache MySQL以及PHP安装在Linux系统上 xff0c 组成一个环境来运行php的脚本语言 Apache是最常用的WEB服务软件

  • 转身不带走一丝云彩--我的2014

    时间或许就是这样不管你愿意不愿意都会毫不犹疑的向前 xff0c 逼你成长 2014年得到了很多也失去了很多 xff0c 我对未来还是有诸多憧憬的 谨以此文献给过去的时光 xff0c 也希望对后来人能有所帮助 改变篇 相比于2013年 xff

  • 一年装三次Arch Linux，每次都有新收获

    只要跟随优秀的教程 xff0c 装机过程so easy archlinux 双系统真机安装演示 哔哩哔哩 bilibili Archlinux系统安装 xff0c 配置 xff0c 游戏 黑客驰HackerChi 哔哩哔哩 bilibili

  • Linux系统中PS1命令详解

    本帖主要针对经常使用Linux命令行且对命令行界面美观和可阅读性有一定要求的同学 xff0c 主要讲解如何通过修改PS1命令定义命令行的显示以及提供一条可直接复用的PS1命令 原文链接 简介 xff1a PS1命令是linux系统中的一个全

  • firewalld

    一 firewalld 介绍 firewalld 防火墙 xff0c 其实就是一个隔离工具 xff1a 工作于主机或者网络的边缘 xff0c 对于进出本主机或者网络的报文根据事先定义好的网络规则做匹配检测 xff0c 对于能够被规则所匹配的

  • yum升级CURL到最新版本的方法，非常好用

    首先 xff0c 先为你的服务器获取最新匹配的源 xff1a http mirror city fan org ftp contrib yum repo 安装新版libcurl的yum源 rpm ivh http mirror city f

  • 百度笔试题2018

    题外话 首先我要吐槽一下 xff0c csdn简直是在作死啊 xff0c 复制博文底下的那个引用太恶心了 xff0c 我复制自己的博客 xff0c 还有引用 xff0c 啥玩意啊 所以我决定换地方了 xff0c 以后github xff08

  • 你见过的最全面的Python重点知识总结!

    这是一份来自于 SegmentFault 上的开发者 64 二十一 总结的 Python 重点 由于总结了太多的东西 xff0c 所以篇幅有点长 xff0c 这也是作者 34 缝缝补补 34 总结了好久的东西 xff0c 强烈建议收藏再慢慢

  • 程序员经典语录

    程序员编程语录 1 一个好的程序员是那种过单行线马路都要往两边看的人 xff08 Doug Linder xff09 2 程序有问题时不要担心 如果所有东西都没问题 xff0c 你就失业了 xff08 软件工程的Mosher定律 xff09

  • 使用fastboot命令刷机流程详解

    一 Fastboot是什么 1 1 首先介绍Recovery模式 卡刷 在系统进行定制时 xff0c 编译系统会编译出一份ZIP的压缩包 xff0c 里面是一些系统分区镜像 xff0c 提供给客户进行手动升级 恢复系统 需要提前将压缩包内置

  • 【谷歌插件】谷歌插件制作

    文章目录 谷歌浏览器插件制作教程实现步骤成功示例问题未封装的扩展程序并非来自 Chrome 网上应用商店 谷歌浏览器插件制作 教程 教程1 xff1a https blog csdn net github 35631540 article

  • 一个刚毕业大学生的四个月苦逼程序员经历

    先来一个自我介绍 大学时排名老三 就暂且叫老三吧 xff0c 毕业于河南的一个还算可以的二本院校 xff0c 专业 地球信息科学与技术 首先介绍一下我的专业 xff0c 听着名字很高大上 xff0c 其实 xff0c 我们都叫他四不像专业

  • JS中的require、import、default、export

    刚开始学的时候经常弄混总结一下 xff1a 懒人 xff1a 1 require xff08 导入 xff09 是Commonjs的规范与module exports xff08 导出 xff09 搭配使用 2 import xff08 导

  • Ubuntu安装python3

    sudo apt get install python3 安装python3 xff0c 安装完之后系统默认还是python2 xff0c 要删除python link文件 sudo rm rf usr bin python 然后建立新连接

  • ubuntu安装shutter出现E：无法修正错误

    使用Ubuntu16 04安装shutter时出现如下错误 通过换源可以解决

  • Ubuntu不能访问Windows分区

    将Windows的快速启动关闭即可解决次问题 在电脑中安装了双系统 xff0c 但有时候在Ubuntu中访问Windows分区会出现如下错误 xff1a 以前出现过这种错误 xff0c 是因为windows系统没有完全关闭 xff0c 当时

随机推荐

  • Ubuntu和Windows双系统时间不对的解决办法

    在使用一系统再切换到另一个系统之后 xff0c 系统时间好像是停留在上次关闭该系统的时间 在网上的解决办法通常是 xff1a sudo gedit etc default rcS xff0c 将UTC 61 yes改成UTC 61 no 但

  • Ubuntu出现依赖关系问题 - 仍未被配置问题

    安装软件包时候出现如下错误 xff1a 但这并不是依赖问题 xff0c 使用sudo apt get f install 无法解决 其实问题是因为这六个软件包没有被完全安装或卸载 在安装其他软件的时候会出现 xff1a 就是指这六个软件 使

  • 熬夜总结！最全的Pycharm常用快捷键大全！

    版权声明 xff1a 本文为博主原创文章 xff0c 遵循 CC 4 0 BY SA 版权协议 xff0c 转载请附上原文出处链接和本声明 本文链接 xff1a https blog csdn net momoda118 article d

  • iOS底层-对象里都有什么

    前言 上篇文章说了iOS中alloc方法是怎么创建对象的 xff0c 以及对象的本质是结构体 接下来继续探究对象的内存分布 xff0c 以及对象的isa是个什么样的结构体 xff0c 存储了哪些信息 对象内存分布 已知系统给对象分配内存是1

  • iOS底层-类的三顾茅庐（一）

    前言 了解完对象的底层 xff0c 知道isa指向的是类对象 那么类 xff08 Class xff09 的本质究竟是什么 xff1f 本文顺序isa的指向 xff0c 探索类的继承链 xff0c 和类对象的结构 xff0c 并且尝试获取方

  • iOS底层-alloc方法之旅

    前言 通过汇编调试和源码分析 xff0c 介绍iOS开发当中alloc方法到底做了什么 追踪 alloc 实例化一个对象往往是通过 xxx alloc init 那么alloc和init的区别是什么 xff1f 将两个方法分开调用 xff0

  • iOS底层-类的三顾茅庐（二）

    前言 上篇文章分析了objc class里存储数据的bits xff0c 了解到方法和属性的存储的位置class rw t xff08 以下简称rw xff09 本文将继续研究rw里包含的其他内容 类数据的存储 书接上文 xff0c rw结

  • iOS底层-类的三顾茅庐（三）

    前言 上文讲解完了类对象的结构体objc class用来存储类信息的成员bits xff0c 整个结构还剩下方法的缓存cache xff0c 放在压轴来讲解 简化版 struct objc class objc object 类对象指针 x

  • iOS底层-消息发送机制

    前言 通过对类的缓存探索了解到方法缓存在类对象的成员cache中 xff0c 而缓存的目的是为了方法调用的时候能更快的进行响应 缓存的时候 xff0c cache t结构体用到insert方法进行插入的 xff0c 那么本次就探索怎么读取

  • iOS底层-消息的转发

    前言 上篇文章介绍了方法调用的本质是消息发送 那如果经过查找后 xff0c 没有找到方法 xff0c 系统会怎么处理 xff1f 这就是本文接下来介绍的方法的动态决议和消息转发 动态决议 当方法查找一直查到父类为nil之后 xff0c 有i

  • 指针地址+1的理解

    指针向后移动一个单位 xff0c 如果是char指针 xff0c 就是1 xff0c 如果是int指针 xff0c 就是4 xff0c 如果是数组 xff0c 还要看是哪一维的下标 xff0c 要加上相应的维 include lt stdi

  • ConcurrentHashMap、synchronized与线程安全

    最近做的项目中遇到一个问题 xff1a 明明用了ConcurrentHashMap xff0c 可是始终线程不安全 除去项目中的业务逻辑 xff0c 简化后的代码如下 xff1a public class Test40 public sta

  • Spring MVC集成slf4j-logback

    1 Spring MVC集成slf4j log4j 关于slf4j和log4j的相关介绍和用法 xff0c 网上有很多文章可供参考 xff0c 但是关于logback的 xff0c 尤其是Spring MVC集成logback的 xff0c

  • 安装spinningup填坑ERROR: Could not build wheels for mpi4py which use PEP 517

    深度强化学习教程 xff1a Spinning Up项目中文版 Spinning Up 文档 ERROR Failed building wheel for mpi4py Failed to build mpi4py ERROR Could

  • Spring Bean 创建过程

    0 通常 xff0c 无论是DispatcherServlet ContextLoaderListener还是ClassPathXmlApplicationContext xff0c 首次实例化bean的入口并不是在每次调用getBean的

  • MySQL DataSource 性能对比（2015-8-19）

    1 本地性能测试耗时 xff08 一 xff09 共同条件 xff1a 测试程序与数据库在同一台主机上 xff0c 各DataSource均采用默认配置 xff0c 每个线程循环1000次 xff0c 查询语句为select from ta

  • MySQL 乐观锁 简例

    乐观锁与悲观锁不同的是 xff0c 它是一种逻辑上的锁 xff0c 而不需要数据库提供锁机制来支持 当数据很重要 xff0c 回滚或重试一次需要很大的开销时 xff0c 需要保证操作的ACID性质 xff0c 此时应该采用悲观锁 而当数据对

  • HTML5 Canvas 初步：字符串，路径，背景，图片

    HTML5中新增了 lt canvas gt 画布标签 xff0c 通过它 xff0c 可以使用JavaScript在网页中绘制图像 lt canvas gt 标签在网页中得到的是一个矩形空白区域 xff0c 可以通过width和heigh

  • CSS 伪类与伪元素

    CSS的元素选择器除了根据id xff08 xff09 class xff08 xff09 属性 xff08 xff09 选取元素以外 xff0c 还有很重要的一类 xff0c 就是根据元素的特殊状态来选取元素 它们就是伪类和伪元素 跟id

  • CSS3 动画效果总结

    CSS3添加了几个动画效果的属性 xff0c 通过设置这些属性 xff0c 可以做出一些简单的动画效果而不需要再去借助JavaScript CSS3动画的属性主要分为三类 xff1a transform transition以及animat

热门标签