css3动画animation

最新推荐文章于 2024-08-28 10:40:01 发布

往事随风

最新推荐文章于 2024-08-28 10:40:01 发布

阅读量308

点赞数

文章标签： css3 前端 css html5 javascript

本文链接：https://blog.csdn.net/qq_44732010/article/details/132663494

版权

animation兼容性（了解）

CSS animation 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，重复次数以及如何重复来控制
目前从 Can I Use 查到浏览器的兼容性还是可以的
在这里插入图片描述

animation，一个简写的属性

是由animation-name，animation-duration，animation-timing-function，animation-delay，animation-interation-count，animation-direction，animation-fill-mode，animation-play-state这八个属性组成的
语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

@keyframes关键帧规则

首先还是得先了解一下这个动画是由每一帧的变化所构成的，因此我们需要定义关键帧的样式，从而控制动画的效果
语法：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname: 必需的，定义animation的名称
keyframes-selector: 必需的，动画持续时间的百分比；合法值：0-100%;或者 from(和0%相同)，to(和100%相同)
css-styles: 必需的，一个或多个合法的css样式属性

from - to写法如下

@keyframes changeColor{
	//等效于0%
	from:{
		color:red
	}
	//等效于100%
	to:{
		color:blue
	}
}

0-100%写法如下

@keyframes setColor{
	0%:{
		color:red;
	}
	50%{
		color:yellow;
	}
	100%:{
		color:blue
	}
}

注意：
如果一个 @keyframes 里的关键帧的百分比存在重复的情况，以最后一次定义的关键帧为准；因为@keyframes的规则不存在层叠样式的情况，即使多个关键帧设置相同的百分值也不会全部执行。关键帧中出现的 !important关键词将会被忽略

animation-name

animation-name指定应用的一系列动画，这里后面填的是keyframes的名称，可以填多个复合动画名
语法：

animation-name:changeColor setColor;//这里的每一个名称changeColor或者setColor必须在keyframes里定义。

animation-duration

这个表示的是定义一个周期时长，默认是0s，即不执行动画。注意没有单位无效，并且这个属性直接关系到动画执行与否。也是一个复合属性，可以写多个动画时长
语法：

animation-duration: 10s, 30s//没有单位无效

animation-timing-function

表示一个过渡动画中一维数值的改变速度，与transition里的一样，可以用三次贝塞尔曲线，速度曲线。cubic-bezier()，ease-in(加速)，ease-out(减速)、ease-in-out(先加速后减速)、linear（匀速），也是可以写多个值，套用于多个动画。

animation-delay 设置动画延迟

定义动画开始前的等待时间，这个属性非一定要设置，默认值为0；也是可以写多个值，套用与多个动画，
提示：允许负值，-2s使动画马上开始，但跳过2秒进入动画

animation-duration：4s;//当前动画执行4s
animation-delay：-3s;//动画开始直接跳到第3s动画

animation-direction动画方向设置

animation-direction属性定义是否循环交替反向播放动画
**注意：**如果动画被设置为只播放一次，该属性将不起作用
语法：

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

在这里插入图片描述

animation-iteration-count动画在结束前运行的次数

语法：

animation-iteration-count: value;//value：可以是n 一个数字，定义应该播放多少次动画；可以是 infinite 指定动画无限循环

animation-fill-mode

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。默认值：none
语法：

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

在这里插入图片描述

animation-play-state

animation–play-state属性指定动画是否正在运行或已暂停。
**注意：**在JavaScript中使用此属性在一个周期中暂停动画
语法：

animation-play-state: paused|running;//paused：暂停动画，running：指定正在运行的动画

应用案例地球转动

周围的小球可围绕圆心转动，鼠标移入小球后，可停止动画
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css3实现地球模型旋转缩放</title>
	<style>
		@keyframes animX {
		  0% {
		    left: 0px;
		  }
		  100% {
		    left: 500px;
		  }
		}
		@keyframes animY {
		  0% {
		    top: 0px;
		  }
		  100% {
		    top: 300px;
		  }
		}
		@keyframes scale {
		  0% {
		    transform: scale(0.4);
		    z-index: 0;
		  }
		  50% {
		    transform: scale(1);
		    z-index: 3;
		  }
		  100% {
		    transform: scale(0.5);
		    z-index: 0;
		  }
		}
		.ball {
		  width: 105px;
		  height: 105px;
		  /*background-color: #f66;*/
		  border-radius: 50%;
		  position: absolute;
		  color: #fff;
		  font-size: 22px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background: yellow;
		  background-size: 100% 100%;
		  -webkit-background-size: 100% 100%;
		  line-height: 120px;
		  z-index: 3;
		  /*动画执行一次所需时间*/
		  animation-duration: 10s, 10s, 20s;
		  /*动画以何种运行轨迹完成一个周期*/
		  /* 在CSS的cubic-bezier()函数中，起点和终点的坐标是固定的，分别是(0,0)和(1,1)，因此，cubic-bezier()函数支持的参数值只有4个，代表了两个控制点的坐标，语法如下：
		 cubic-bezier(x1, y1, x2, y2) */
		  animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
		  /*动画播放次数,无线循环播放*/
		  animation-iteration-count: infinite;
		  /*是否轮流反向播放动画 alternate:正向播放*/
		  animation-direction: alternate;
		  animation-name: animX, animY, scale;
		}
		#lopp {
		  width: 500px;
		  height: 300px;
		  border: 2px solid #999;
		  border-radius: 50%;
		  position: absolute;
		  left: 50px;
		  top: 70px;
		}
		/*鼠标进入停止*/
		.active {
		  animation-play-state: paused;
		}
		.circle {
		  position: absolute;
		  top: 114px;
		  left: 250px;
		  background: red;
		  border-radius: 50%;
		  width: 100px;
		  height: 100px;
		  z-index: 3;
		  color: #fff;
		  font-size: 16px;
		  display: -webkit-box;
		  display: -ms-flexbox;
		  display: flex;
		  -webkit-box-pack: center;
		  -ms-flex-pack: center;
		  justify-content: center;
		  cursor: pointer;
		  background: lightgreen;
		  background-size: 100% 100%;
		  -webkit-background-size: 100% 100%;
		}
		.container {
		  position: relative;
		  transform: rotateX(20deg);
		  width: 800px;
		  height: 800px;
		  margin: 0 auto;
		}
</style>
</head>
<body>
	<div>
		<div class="container">
			<!--	圆心-->
			<div class="circle"><span style="line-height: 84px;">圆心</span></div>
			<div class="borther">
				<div id="lopp"></div>
				<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">1</div>
				<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">2</div>
				<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">3</div>
				<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">4</div>
				<div class="ball" onmouseenter="onMouseGo()" onmouseout="onMouseMove()" onclick="clickMsg(this)">5</div>
			</div>
		</div>
	</div>
	<script>
		var items = document.querySelectorAll('.ball')
		for (var i = 0; i < items.length; i++) {
			(function (i) {
				items[i].style['animation-delay'] = (-5) - 4 * i + 's,' + (-4 * i) + 's,' + (-4 * i) + 's'
			})(i)
		}
		function onMouseGo () {
			for (var i = 0; i < items.length; i++) {
				(function (i) {
					items[i].classList.add('active')
				})(i)
			}
		}
		function onMouseMove () {
			for (var i = 0; i < items.length; i++) {
				(function (i) {
					items[i].classList.remove('active')
				})(i)
			}
		}
		function clickMsg (e) {
			alert(e.innerText)
		}
	</script>
</body>
</html>

往事随风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css3动画animation

animation兼容性（了解）CSS animation 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，重复次数以及如何重复来控制目前从 Can I Use 查到浏览器的兼容性还是可以的animation，一个简写的属性是由animation-name，animation-duration，animation-timing-function，animation-delay，animation-interation-c
复制链接

扫一扫