CSS学习笔记二

最新推荐文章于 2022-06-11 21:15:00 发布

LKFOOD

最新推荐文章于 2022-06-11 21:15:00 发布

阅读量166

点赞数

分类专栏： CSS学习文章标签： css动画

本文链接：https://blog.csdn.net/LKFOOD/article/details/88851008

版权

CSS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

transition动画（过渡动画）和keyframes动画

1.transition动画
首先介绍一些transition的一些属性：
transition-duration：完成动画所需要的时间——默认为0，动画效果无效，所以一定要设置一个时间
transition-delay：动画延迟多久开始
transition-property：动画效果的css属性的名称如width height等
transition-timing-function：动画的速度曲线

代码实现：

<!DOCTYPE html>
<html>
<head>
	<title>keyFrom</title>
	<style type="text/css">
		.container{
			width: 200px;
			height: 200px;
			background-color: red;
			transition-duration: 1s;
			transition-delay: 0;
			transition-property: all;
			transition-timing-function: ease;

		}
		.container:hover{
			width: 500px;
			height: 500px;
		}
	</style>
</head>
<body>
<div class="container"></div>
</body>
</html>

实现一个简单的动画，div初始时宽度和高度200px,当鼠标悬停时，进行宽度和高度拉长的动画
其中：
动画完成时间：1s
动画延迟：0s
动画css属性：all 即宽和高
时间曲线：ease 慢速开始和结束中间快
该属性常用效果有：linear ease ease-in ease-out等

2.keyframes动画
重点：animation属性类似与transition属性
其中@keyframes 中可设置from和to 也可以设置0% 50% 100%等

实现transition动画效果代码：

<!DOCTYPE html>
<html>
<head>
	<title>keyFrom</title>
	<style type="text/css">
		
		.container{
			width: 200px;
			height:200px;
			background-color: red;
			/*animation: run 5s;*/
			animation-name: go;
			animation-duration: 1s;
			animation-iteration-count:  infinite;
		}
		@keyframes go{
			0%{
				height:  100px;
			}
			50%{
				height: 600px;
			}
			100%{
				height: 500px;
			}
		}
	</style>
</head>
<body>
<div class="container"></div>
</body>
</html>

animation-iteration-count: infinite; 无限循环