CSS3 @keyframes规则和animation属性实现动画效果

@keyframes规则

定义

使用@keyframes规则,可以创建动画,使元素从一种样式逐渐变化为另一种样式。设置指定时间点的变化时使用%,或使用关键字‘from’和‘to’(与from和to相应的是0%和100%)。

语法

@keyframes animationname {
	keyframes-selector{
		css-styles;
	}
}
说明
animationname 必需的。定义animation属性的名称。
keyframes-selector 必需的。动画持续时间的百分比。合法值:0%-100%。 from (和0%相同) to (和100%相同)注意: 您可以用一个动画keyframes-selectors。
css-styles 必需的。一个或多个合法的CSS样式属性(如height、width、transform等)

animation 属性

定义

所有动画属性的简写属性(除了 animation-play-state 属性)用于设置六个动画属性,将动画和元素绑定。

语法

animation:name duration timing-function delay iteration-count direction

描述
animation-name 规定需要绑定到选择器的keyframe名称
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。请始终规定 animation-duration 属性,否则时长为 0,不会播放动画。
animation-timing-function 规定动画的速度曲线(可选)
animation-delay 规定在动画开始之前的延迟(可选)
animation-iteration-count 规定动画应该播放的次数(可选 不设置只执行一次)
animation-direction 规定是否应该轮流反向播放动画(可选 不设置不循环)

简单的实例

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	*{
     
		margin: 0;
		padding:0;
	}
	div{
     
		width: 200px;
		height: 200px;
		border: none;
		background-color: darkturquoise;
		//test-keyframes名称 2s-完成动画所需时间 0s-动画开始之前的延迟 infinite-循环播放
		animation: test 2s 0s infinite;
	}
	@keyframes test{
     
		0%{
     
			margin-top: 0px;
		}
		50%{
     
			background-color: yellow;
		}
		100%{
     
			margin-top: 100px;
			width: 20px;
			height: 20px;
		}
	}

</style>
<body>
    <div></div>
</body>
</html>

效果图

动态效果图不好展示。。。。
CSS3 @keyframes规则和animation属性实现动画效果_第1张图片
CSS3 @keyframes规则和animation属性实现动画效果_第2张图片
CSS3 @keyframes规则和animation属性实现动画效果_第3张图片

你可能感兴趣的:(CSS,css3)