CSS3——过渡与动画

最新推荐文章于 2023-08-10 20:14:15 发布

原创最新推荐文章于 2023-08-10 20:14:15 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #动画

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

1、transition过渡

将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”

transition——属性名持续时间过渡方法
transition-property —— 属性名|all，即对哪个属性进行变化
transition-duration —— 持续时间
transition-timing-function —— 过渡使用的方法（函数）其取值有linear（匀速）、ease（慢快慢）、ease-in（慢快）、ease-out（快慢）、ease-in-out（慢快慢）

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		div{
			height: 30px;
			width: 150px;
			line-height: 30px;
			border: 1px solid red;
            background-color: yellow;
			transition: all 2s linear;	
		}
		div:hover{
			color: white;
			background-color: #000;
		}

	</style>
</head>
<body>
	<div>你今天开心吗</div>
</body>
</html>

2、animation动画

很多个状态完成过渡，定义动画（使用@keyframes）——调用动画

animation——名称时间方式
animation-name——引用@keyframes动画的名称
animation-duration——动画完成时间
animation-timing-function——规定动画的速度曲线，默认是“ease”
animation-play-state——表示动画当前播放状态，取值为running|paused

@keyframes mybgcolor{   //定义动画，设置了如下4个关键帧
	0%{background-color: red}
	30%{background-color: yellow}
	60%{background-color: orange}
	100%{background-color: white}
}
div:hover{   //调用动画
	animation: mybgcolor 5s linear;
}