CSS 动画

最新推荐文章于 2021-12-17 13:21:29 发布

安澜仙王

最新推荐文章于 2021-12-17 13:21:29 发布

阅读量184

点赞数

分类专栏： # CSS 文章标签： css3 其他 css

本文链接：https://blog.csdn.net/sinat_28317385/article/details/121323933

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

动画的基本使用

制作动画分为两步：

1.先定义动画
2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {
	0%{
		width:100px;
	}
	100%{
		width:200px;
	}
}

动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%。

2.元素使用动画

div {
		width: 200px;
		height: 200px;
		background-color: #0072C6;
		margin: 100px auto;
		/* 调用动画 */
		animation-name: 动画名称;
		/* 持续时间 */
		animation-duration: 持续时间;
	}

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 我们想页面一打开,一个盒子就从左边走到右边 */
			/* 1.定义动画 */
			/* from和to等价于0%和100% */
			@keyframes move{
				/* 开始状态 */
				0% {
					transform: translateX(0px);
				}
				/* 结束状态 */
				100%{
					transform: translateX(1000px);
				}
			}
			
			div {
				width: 200px;
				height: 200px;
				background-color: #0072C6;
				/* 调用动画 */
				animation-name: move;
				/* 持续时间 */
				animation-duration: 2s;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
示例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes move{
				0% {
					transform: translate(0px,0);
				}
				25%{
					transform: translate(1000px,0);
				}
				50%{
					transform: translate(1000px,500px);
				}
				75%{
					transform: translate(0,500px);
				}
				100%{
					transform: translate(0,0);
				}
			}
			
			div {
				width: 200px;
				height: 200px;
				background-color: #0072C6;
				/* 调用动画 */
				animation-name: move;
				/* 持续时间 */
				animation-duration: 2s;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

常用的动画属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称。(必须的)
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0(必须的)
animation-timing-function	规定动画的速度曲线，默认是"ease"
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite(无限次，一直重复)
animation-direction	规定动画是否在下一周期逆向播放，默认是"normal",alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"paused"
animation-fill-mode	规定动画结束后状态，保持forward,回到起始backwards

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes move{
				0% {
					transform: translate(0px,0);
				}
				100%{
					transform: translate(1000px,0);
				}
			}
			
			div {
				width: 200px;
				height: 200px;
				background-color: #0072C6;
				/* 调用动画 */
				animation-name: move;
				/* 持续时间 */
				animation-duration: 2s;
				/* 运动曲线 */
				/* animation-timing-function: ease; */
				/* 何时开始 */
				/* animation-delay:1s; */
				/* 重复次数 */
				/* animation-iteration-count:3; */
				/* 是否反方向播放 */
				/* animation-direction:alternate; */
				/* 规定动画结束后状态，保持forward,回到起始backwards */
				/* animation-fill-mode:forwards; */
			}
			
			div:hover{
				/* 规定动画是否正在运行或暂停。默认是"running",还有"paused" */
				/* 鼠标经过div，让这个div停止动画，鼠标离开动画继续 */
				animation-play-state:paused;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

动画简写属性

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束状态

前两个属性一定要写

animation:myfirst 5s linear 2s infinite alternate;

简写属性里面不包含animation-play-state
暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来:animation-direction：alternate
盒子动画结束后，停在结束位置:animation-fill-mode:forwards

大数据热点图案例

在这里插入图片描述
源代码地址：
https://gitee.com/www.lvdaqiang.com/big-data-hotspot-map-case

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

速度曲线细节

animation-timing-function:规定动画的速度曲线，默认是"ease"

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量(步长)

示例：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
		</style>
	</head>
	<body>
		 <div>世纪佳缘我在这里等你</div>
	</body>
</html>

奔跑的大熊案例

在这里插入图片描述
资料地址：
https://gitee.com/www.lvdaqiang.com/big-case-of-running-bear

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(image/bear.png) no-repeat;
            /* 我们元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

安澜仙王

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 动画

目录动画的基本使用1.用keyframes定义动画(类似定义类选择器)2.元素使用动画常用的动画属性动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。动画的基本使用制作动画分为两步：1.先定义动画2.再使用(调用)动画1.用keyframes定义动画(类似定义类选择器)@keyframes 动画名称 { 0%{ width:100px; } 100%{
复制链接

扫一扫