HTML-从零开始的学习过程（15）

最新推荐文章于 2023-02-15 16:49:29 发布

Dokey_L

最新推荐文章于 2023-02-15 16:49:29 发布

阅读量152

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/Dokey_L/article/details/106824663

版权

CSS3动画

CSS3动画（animation）：使元素从一种样式逐渐变化到另一种样式的效果。
兼容性：ie10+、firefox16+、 chrome 43+、 safari9+ 、 opear30+ 、Android(-WEBKIT-)；
注：手机设备的浏览器使用CSS3动画时候，必须加上前缀（-webkit-）；

animation属性

animation-name属性

检索或者设置对象所应用的动画的名称
语法： keyframename | none；
参数说明：
keyframename – 指定要绑定到选择器的关键帧的名称；
none – 指定有没有动画（可用于覆盖从级联的动画）；

animation-duration属性

检索或者设置对象动画的持续时间
语法：animation-duration: time；
参数说明：动画播放完成所花费的时间，默认值0 意味着没有动画效果。

注：对于动画来说，animation-name和animation-duration是必须的。

animation-timing-function属性

检索或者对象动画的的过渡类型
语法：

ease 平滑过渡等同于贝塞尔曲线(0.25，0.1，0.25，1.0),开头和结尾比较平滑，但是最后相对较快;
linear 线性过渡 – 等同于贝塞尔曲线(0.0，0.0，1.0，1.0),突然开始，中间匀速得，再次突然停止;
ease-in 由慢到快;
ease-out 由快到慢;
ease-in-out 慢-快-慢;
step-start 一帧一帧设置;
step-end;
step< angle>[start | end]、

animation-delay属性

检索或者设置对象动画的延迟时间
语法：animation-delay:time
参数：可选，定义动画开始前等待的时间，以s或者ms计算，默认值0

animation-direction属性

检索或者设置对象中的动画在循环中是否反向运动
语法：属性值如下
normal – 正常方向
reverse – 反方向运行
alternate – 动画先正常运行再的方向运行，并持续交替
alternate-reverse – 动画先反向运行再正常运行，并持续交替
initial – normal
inherit – 继承父元素

animation-iteration-count属性

检索或设置对象动画循环交替的效果
语法：animation-iteration-count：infinite循环/数值（执行的次数）

注： alternate和alternate-reverse属性值配合循环设置一起使用，否则失效！

animation-fill-mode属性

规定当动画不播放时候（当动画播放完成或者延迟状态下未开始播放），要应用到元素的样式。
语法：属性值如下
none – 默认值不设置动画之外的状态
forwards – 设置对象状态为动画结束时的状态
backwards – 设置对象状态为动画开始时的状态
both – 设置对象状态为动画开始或者结束时的状态

animation-play-state属性

指定动画是否正在运行或者已经暂停
语法：属性值如下
paused – 指定动画暂停
running – 默认值 – 指定正在运行的动画

animation复合属性

复合属性，检索或者设置对象所应用的动画特效。
语法：animation：name duration timing-function delay iteration-count
direction fill-mode play-state;
animation机制：优先选择两个属性 – name属性 – duration属性
一般情况下如果只有一个时间的话，肯定表示duration
如果是两个时间的话，第一个是duration 第二个才是delay

关键帧 – @keyframes

关键帧，可以指定任何顺序来排列Animation动画变化的关键位置。
使用说明：使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。可以通过关键帧多次更改css样式的设定。
语法

@keyframes animationname{
  keyfrtames-selector{
      css-styles;
}
}
参数说明：
1、animationname  --  必选项，定义动画名字
2、keyframes-selector  --  必选项，动画持续的百分比  0-100%   form（0%）   to（100%）
3、css-styles：必选项，一个或者多个合法的css样式属性

动画性能优化—will-change属性

提前告知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。
语法：will-change:属性值如下：
auto – 自动适应
scroll-position – 将要改变元素的滚动位置
contents – 将要改变元素的内容
custom-ident – 明确指定将要改变的属性和给定的名称—will-change:transform;
animateable-feature – 指定动画的一些特征值—will-change: left/top/margin;
兼容：ie13+ firefox47+ chrome49+ opera39+ ios9.3+ Android52+

示例：太极图案旋转
效果：在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.main{
			width: 604px;
			height: 604px;
			border:1px solid #f00;
			position: relative;
			margin: auto;
			border-radius: 50%;
			background-image: linear-gradient(90deg, #f00 50%, #fff 0%);
			-webkit-animation: taiji 3s linear infinite;
		}
		.top{
			width: 300px;
			height: 300px;
			margin: 0 auto;
			border: 1px solid #f00;
			background-color: #f00;
			border-radius: 50%;
		}
		.bottom{
			width: 300px;
			height: 300px;
			margin: 0 auto;
			border: 1px solid #fff;
			border-radius: 50%;
			background-color: #fff;
		}
		.middle-top{
			width: 50px;
			height: 50px;
			margin-top:120px;
			margin-left: 120px;
			border: 1px solid #fff;
			background-color: #fff;
			border-radius: 50%;
		}
		.middle-bottom{
			width: 50px;
			height: 50px;
			margin-top:120px;
			margin-left: 120px;
			border: 1px solid #f00;
			background-color: #f00;
			border-radius: 50%;
		}
		@keyframes taiji{
			from{transform: rotateZ(0deg);}
			to {transform: rotateZ(360deg);}
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="top">
			<div class="middle-top"></div>
		</div>
		<div class="bottom">
			<div class="middle-bottom"></div>
		</div>
	</div>
</body>
</html>

Dokey_L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-从零开始的学习过程（15）

CSS3动画CSS3动画（animation）：使元素从一种样式逐渐变化到另一种样式的效果。兼容性：ie10+、firefox16+、 chrome 43+、 safari9+ 、 opear30+ 、Android(-WEBKIT-)；注：手机设备的浏览器使用CSS3动画时候，必须加上前缀（-webkit-）；animation属性animation-name属性检索或者设置对象所应用的动画的名称语法： keyframename | none；参数说明：keyframenam
复制链接

扫一扫