CSS- 动画模块

最新推荐文章于 2022-12-28 20:41:51 发布

guardwhy

最新推荐文章于 2022-12-28 20:41:51 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/hxy1625309592/article/details/109842467

版权

该博客主要探讨了CSS动画模块，包括基本属性、其他属性和连写实现。详细讲解了过渡和动画之间的区别与共同点，强调它们都是用于元素动画的系统属性，并且需要满足特定条件才能生效。文中通过代码示例和执行结果展示了如何应用这些概念。

摘要由CSDN通过智能技术生成

1.1 基本属性

过渡和动画之间的不同点

过渡必须人为的触发才会执行动画。
动画不需要人为的触发就可以执行动画。

过渡和动画之间的相同点

过渡和动画都是用来给元素添加动画的。
过渡和动画都是系统新增的一些属性。
过渡和动画都需要满足三要素才会有动画效果。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动画模块</title>
  <style type="text/css">
	*{
    
		margin: 0;
		padding: 0;
	}
	div{
    
		width: 200px;
		height: 50px;
		background-color: red;
		/*告诉系统需要执行的动画*/
		animation-name: guardwhy;
		/*动画持续的时长*/
		animation-duration: 3s;
	}

	/*告诉系统自己创建的动画*/

最低0.47元/天解锁文章

guardwhy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS- 动画模块

14.1 基本属性过渡和动画之间的不同点过渡必须人为的触发才会执行动画。动画不需要人为的触发就可以执行动画。过渡和动画之间的相同点过渡和动画都是用来给元素添加动画的。过渡和动画都是系统新增的一些属性。过渡和动画都需要满足三要素才会有动画效果。代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画模块</title&g
复制链接

扫一扫