css 动画学习

最新推荐文章于 2023-02-25 23:28:54 发布

yj小耳朵

最新推荐文章于 2023-02-25 23:28:54 发布

阅读量180

点赞数

分类专栏：前端文章标签： css 动画

本文链接：https://blog.csdn.net/yjITcsdn/article/details/101694030

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
参数说明：
name要绑定到选择器的关键帧的名称
duration :动画在多少时间内完成
timing-function：动画播放速度
animation-timing使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

delay: 等待，然后开始动画：

iteration-count ：动画执行次数

值	描述
n	一个数字，定义应该播放多少次动画
infinite	指定动画应该播放无限次（永远）

direction ：动画执行顺序

实例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.circle {
				border: 2px solid #aaa;
				border-radius: 100%;
				width: 25px;
				height: 25px;
				border-top-color: transparent;
				animation: circle infinite 0.75s linear;				
			}
			
			@keyframes circle {
				0% {
					transform: rotate(0deg);
					 
				}
				100% {
					transform: rotate(360deg);
				}
			}
 			.circle4{
 				width: 200px;
 				height: 100px; 				 
 				display: flex; 				
 			}
 			.circle4 p{
 				width: 8px;
 				height: 8px;
 				border-radius: 50%;
 				margin-left:5px;
 				background-color: lightseagreen;  
 				/*执行的动画规则是myThress 0.8s内完成动画  动画以低速开始和结束  永久执行下去*/				 
 				animation: myThree 0.8s ease-in-out alternate infinite; 				
 			}
 			.circle4 p:nth-of-type(1) {
			  animation-delay: -0.4s;
			}		
			.circle4 p:nth-of-type(2) {
			  animation-delay: -0.2s;
			}
	 		@keyframes myThree{
	 			 0%{
	 			 	 opacity: 1;
	 			 }
	 			 100%{	 			 	 
	 			 	 
	 			 opacity: 0;
	 			 }
	 		}
		</style>
	</head>

	<body>
		<div class="circle"></div>		 
		<div class="circle4">
			<p class="p1"></p>
			<p class="p2"></p>
			<p class="p3"></p>
		</div>
	</body>

</html>

效果：

yj小耳朵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 动画学习

animation: name duration timing-function delay iteration-count direction fill-mode play-state;参数说明：name要绑定到选择器的关键帧的名称duration :动画在多少时间内完成timing-function：动画播放速度animation-timing使用的数学函数，称为三次贝塞尔曲线，速...
复制链接

扫一扫