2021-09-06------5.4 CSS3 过渡与动画（transition属性 @keyframs规则 animation属性）

最新推荐文章于 2024-04-20 00:00:00 发布

小昔超厉害

最新推荐文章于 2024-04-20 00:00:00 发布

阅读量282

点赞数

分类专栏： # web前端设计与开发 # CSS # HTML基础文章标签： css3 html

本文链接：https://blog.csdn.net/zjj8008120308/article/details/120128343

版权

web前端设计与开发同时被 3 个专栏收录

54 篇文章 3 订阅

订阅专栏

CSS

24 篇文章 0 订阅

订阅专栏

HTML基础

24 篇文章 2 订阅

订阅专栏

5.4 CSS3 过渡与动画（transition属性 @keyframs规则 animation属性）

过渡效果 ：transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态，发生两个状态之间的一个变化。
动画效果：让一个元素通过animation属性来完成若干个状态之间的一个转换，利用@keyframes规则和animation属性。

过渡 transition属性

transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态，发生两个状态之间的一个变化。
transition 将元素的某个属性或者某几个属性或者所有属性从“一个值”在指定的时间内过渡到“另一个值”。
transition属性的几个子属性（也可以把这几个子属性都写在transition属性里面）
（1）transition-property 作用于哪一个或者哪几个属性。可以带有属性的名字，如果作用于一个属性，就写这个属性的名字；作用于多个属性的话，就用逗号隔开；如果是所有属性，就用关键字all就可以了。
（2）transition-duration 变化的过程持续的时间。用秒或毫秒为单位表示
（3）transition-timing-function 过渡时使用的方法（函数）。有下面几个取值：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡与动画</title>
	<style>
		div{
			width: 100px;
			height: 30px;
			line-height: 30px;/* 文本垂直居中 */
			border-radius: 5px;/* 圆角边框 */
			color: #000;/* 文字的颜色（初始状态） */
			background-color: silver;/* 背景的颜色（初始状态） */
			transition: all 1s linear;/* 所有子属性都写在transition属性里面，针对所有的属性all，过渡时间一秒钟，过渡方式是匀速的变化。 */
		}
		div:hover{
			color: white;/* 文字颜色变化（终止状态） */
			background-color: red;/* 背景颜色变化（终止状态）一秒钟的时间从初始状态过渡到终止状态 */
		}
	</style>
</head>
<body>
	<div>CSS动画</div>
</body>
</html>

效果
初始状态
在这里插入图片描述
终止状态（鼠标悬停到div上）

动画效果 @keyframs规则和 animation属性

动画效果上面的transition属性只能从一个状态到另一个状态，通过animation属性可以让一个元素完成若干个状态之间的一个转换，这就是动画，采用animation属性完成。涉及到@keyframs规则。动画效果分两步：
（1）定义动画：采用@keyframes规则，keyframes翻译出来即关键帧，动画效果就是通过很多幅图片，连续播放的时候利用人眼的视觉延迟，自动地将他们连接在一起就形成了一个动态的动画效果，每幅静态图片都称为是一个keyframes，所以这个规则定义出来的就是所有关键帧。
@keyframes 动画名{
定义动画的关键帧，每个关键帧在定义的时候都要有一个名字，这个名字通常用百分比来表示，0%是最开始的时候，100%是最后播放完的状态，中间的状态用具体的百分比来表示；关键帧的名字后面，用花括号{}括起来，就是当前帧的状态下某一个属性的取值。}
（2）调用规则：animation属性。
animation：动画名播放时间变化方式
animation属性的几个子属性（也可以把几个子属性都写在animation属性里面）
（1）animation-name：引用@keyframes动画的名称，利用@keyframes规则定义出来的动画名。
（2）animation-duration：动画完成时间
（3）transition-timing-function ：规定动画的速度曲线，默认是“ease”，和transition的取值是完全一样的
（4）transition-paly-state：running|paused；表示动画当前播放的状态，running表示当前动画正在播放，paused表示动画播放完成，比如我们可以设置鼠标悬停的时候播放动画，鼠标移出的时候停止播放。
例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡与动画</title>
	<style>
		div{
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;/* 文本垂直居中 */
			border-radius: 5px;/* 圆角边框 */
			color: #000;/* 文字的颜色（初始状态） */
			background-color: silver;/* 背景的颜色（初始状态） */
		}
		div:hover{
			animation: test 3s ease;
		}
		@keyframes test{
			0% {color:#1cf;}
			30% {color: #6cf;}
			60% {color: #acf;}
			100% {color: #fcf}
		}

	</style>
</head>
<body>
	<div>CSS动画</div>
</body>
</html>

效果
开始
在这里插入图片描述

中间
在这里插入图片描述

播放结束
在这里插入图片描述

小昔超厉害

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-09-06------5.4 CSS3 过渡与动画（transition属性 @keyframs规则 animation属性）

5.4 CSS3 过渡与动画（transition属性 @keyframs规则 animation属性）过渡效果：transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态，发生两个状态之间的一个变化。动画效果：让一个元素通过animation属性来完成若干个状态之间的一个转换，利用@keyframes规则和animation属性。过渡 transition属性transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态，发生两个状态之间的一个变化。tran
复制链接

扫一扫