css3过渡与动画

最新推荐文章于 2024-06-01 21:04:53 发布

止于心～

最新推荐文章于 2024-06-01 21:04:53 发布

阅读量28

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/LiuHB_/article/details/133157031

版权

js实现动画属于帧动画（使用定时器），而css3显示动画为补间动画（使用过渡或动画），补间动画需要有起始状态和最终状态。这篇将谈谈css3的过渡与动画。

transition过渡

属性	描述
transition-property	过渡属性的名称
transition-duration	过渡使用的时间，不设置的情况下为0
transition-timing-function	过渡的运动曲线，默认为ease（快➡慢）
transition-delay	过渡何时开始

1.transition-property，一般情况下值填all，all表示所有属性都获得过渡效果，none则是没有属性获得过渡效果，若定义应用过渡效果的 CSS 属性名称列表，列表以逗号隔开，可以只设置这一个值

2.transition-duration，可以只设置该一个值

3.transition-timing-function

值	描述
linear	匀速
ease（默认值）	规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ease-in-out	规定以慢速开始和结束的过渡效果

4.transition-delay，相当于是一个延时器，多久后开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<input class="button1" type="button" value="点击">
		<div class="box1"></div>
	</body>
	<script>
		var button1 = document.querySelector(".button1");
		var box1 = document.querySelector(".box1");
		button1.onclick = function(){
			box1.style.transform = "translate(100px,100px)";
			box1.style.transition = "all 1s linear 1s";
		}
	</script>
</html>

transform

animation动画

animation: 动画的名称时间运动曲线开始时间播放次数是否反向播放是否运用结束的样式动画是否运行或暂停

值	描述
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔
animation-iteration-count	定义动画的播放次数
animation-direction	指定是否应该轮流反向播放动画
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state	指定动画是否正在运行或已暂停

body部分

<input class="button1" type="button" value="点击">
<div class="box1"></div>

css部分

<style>
.box1 {
	width: 200px;
	height: 200px;
	background-color: pink;
}
@keyframes name1 {
	from {
		width: 200px;
		height: 200px;
	}
	to {
		width: 300px;
		height: 300px;
	}
}
</style>

1.动画名称（animation-name），指定要绑定到选择器的关键帧的名称。与@keyframes一起连用，@keyframes 规则是创建动画，紧跟@keyframes后面的值就是动画名称

可以使用from…to…的形式

@keyframes name1 {
	from{}
	to {}
}

也可以使用百分比的形式，百分比的比例由自己定

@keyframes name1 {
	20%{}
	40%{}
	60%{}
	80%{}
	100%{}
}

2.时间（animation-duration），与transform的第二个值一样，表示过渡使用的时间，不设置的情况下为0

3.运动曲线（animation-timing-function），与transform的第三个值一样，具体值，可以看transform-timing-function

4.开始时间（animation-delay），与transform的第四个值一样，延时器

5.播放次数（animation-iteration-count）

值	描述
n	一个数字，定义应该播放多少次动画
infinite	无穷次

n次

<script>
	var button1 = document.querySelector(".button1");
	var box1 = document.querySelector(".box1");
	button1.onclick = function(){
		box1.style.animation = "name1 1s linear 0.5s 2";
	}
</script>

animation-iteration-count

无穷次

<script>
	var button1 = document.querySelector(".button1");
	var box1 = document.querySelector(".box1");
	button1.onclick = function(){
		box1.style.animation = "name1 1s linear 0.5s infinite";
	}
</script>

animation（infinite）

6.是否反向播放（animation-direction）

值	描述
normal（默认值）	动画按正常播放
reverse	动画反向播放
alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
alternate-reverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

reverse反向

<script>
	var button1 = document.querySelector(".button1");
	var box1 = document.querySelector(".box1");
	button1.onclick = function(){
		box1.style.animation = "name1 1s linear 0.5s 2 reverse";
	}
</script>

animation-direction

alternate（1，3，5…）正向，（2，4，6…）反向
alternate-reverse则与alternate相反

<script>
	var button1 = document.querySelector(".button1");
	var box1 = document.querySelector(".box1");
	button1.onclick = function(){
		box1.style.animation = "name1 1s linear 0.5s infinite alternate";
	}
</script>

animation-direction（alternate）

7.是否运用结束的样式（animation-fill-mode）

值	描述
none（默认值）	动画在动画执行之前和之后不会应用任何样式到目标元素
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性

forwards保持最后的运动状态

<script>
	var button1 = document.querySelector(".button1");
	var box1 = document.querySelector(".box1");
	button1.onclick = function(){
		box1.style.animation = "name1 1s linear 0.5s 2 forwards";
	}
</script>

animation-fill-mode(forwards)

backwards回到初始运动状态

<script>
	var button1 = document.querySelector(".button1");
	var box1 = document.querySelector(".box1");
	button1.onclick = function(){
		box1.style.animation = "name1 1s linear 0.5s backwards";
	}
</script>

animation-fill-mode（backwards）

8.动画是否运行或暂停（animation-play-state）

值	描述
paused	暂停动画
running	正在运行的动画

animation-play-state

止于心～

关注

0
点赞
踩
0

收藏

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

js实现动画属于帧动画（使用定时器），而css3显示动画为补间动画（使用过渡或动画），补间动画需要有起始状态和最终状态。这篇将谈谈css3的过渡与动画。1.transition-property，一般情况下值填all，all表示所有属性都获得过渡效果，none则是没有属性获得过渡效果，若定义应用过渡效果的 CSS 属性名称列表，列表以逗号隔开，可以只设置这一个值2.transition-duration，可以只设置该一个值3.transition-timing-function4.transition-de
复制链接

扫一扫