css3动效三：animation 动画

最新推荐文章于 2024-06-07 11:15:24 发布

差不少

最新推荐文章于 2024-06-07 11:15:24 发布

阅读量697

点赞数 1

分类专栏：前端 css3 动效动画 animation 文章标签：动画 animation css动效 css3 前端

本文链接：https://blog.csdn.net/c62387723sq/article/details/89682095

版权

前端同时被 3 个专栏收录

68 篇文章 1 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

动效

3 篇文章 0 订阅

订阅专栏

animation 动画

简写语法: animation: animation-name duration timing-function delay iteration -count direction

属性：

animation-name
被调用的关键帧名称

animation-timing-function
动画的速度曲线

属性值：

linear
动画从头到尾的速度是相同
ease
默认。动画以低速开始，然后加快，在结束前变慢
ease-in
动画以低速开始
ease-out
动画以低速结束
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation –delay
延迟 s/ms

animation-iteration-count
动画应该播放的次数

属性值：

infinite
无限次播放
omal
设置播放次数

animation-direction
规定是否该轮流反向播放动画

属性值：

normal
alternate
动画应该轮流反向播放
reverse
动画反向播放
alternate-reverse
动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

animation-play-state
暂停/运行

属性值：

paused 暂停
running 运行

animation-fill-mode
规定动画在播放之前或者之后，其动画效果是否可见

属性值：

none
不改变，默认
forwards
当动画完成后保持最后一个属性值
backwards
在animation –delay指定的一段时间之内，在动画显示之前，应用开始属性值。
both
向前和向后填充模式都被应用。

@keyframes：

语法：@keyframes animation-name {keyframes-selector {css-styles;}}

animation-name
被调用的关键帧名称
是必需的，用来定义animation的名称。

keyframes-selector
必需的，动画持续时间的百分比

合法值：

0-100%
from (和0%相同)
to (和100%相同)
注：可以用一个动画keyframes-selectors。

例如：
@keyframes move
{
0% {left:0px;}
25% {left:-200px;}
50% {left:100px;}
75% {left:200px;}
100% {left:10px;}
}

css-styles
必需的，可使用一个或多个合法的CSS样式属性

跑动示例：

素材图
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跑步</title>
		<style>
			body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,blockquote,address,pre{margin:0;padding:0;}
			h1,h2,h3,h4,h5,h6,input,textarea,select,button,label{font-size:100%;vertical-align:middle;}
			ul,dl,ol{list-style:none;}
			img,fieldset{border:none;}
			img{display:inline-block;overflow:hidden;vertical-align:top;}
			em,address{font-style:normal;}
			sup,sub{vertical-align:baseline;}
			table{border-collapse:collapse;border-spacing:0;}
			q:before{content:"";}
			q:after{content:"";}
			button{cursor:pointer;}
			textarea{word-wrap:break-word;resize:none;}
	
			
			
			/* 正式样式文件 */
			.charector-wrap {
				position: relative;
				width: 180px;
				height: 300px;
				border:1px solid red;
				left: 50%;
				margin-left: -90px;
			}
			
			
			.charector {
				position: absolute;
				width: 180px;
				height: 300px;
				background: url(charector.png) 0 0 no-repeat;
				animation-name: move;
				animation-duration: 950ms;
				animation-iteration-count: infinite;
				animation-timing-function: step-start; /*马上跳转到动画每一帧结束的状态*/
			}
			
			
			@keyframes move {
				0% {
					background-position: 0 0;
				}
				14% {
					background-position: -180px 0;
				}
				28% {
					background-position: -360px 0;
				}
				42% {
					background-position: -540px 0;
				}
				56% {
					background-position: -720px 0;
				}
				70% {
					background-position: -900px 0;
				}
				84% {
					background-position: -1080px 0;
				}
				100% {
					background-position: 0 0;
				}
			}
		</style>
	</head>
	<body>
		<div class="charector-wrap">
			<div class="charector"></div>
		</div>
	</body>
</html>

差不少

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动效三：animation 动画

animation 动画简写语法: animation: name duration timing-function delay iteration -count direction属性：animation-name被调用的关键帧名称animation-timing-function动画的速度曲线属性值：linear动画从头到尾的速度是相同ease默认。动画以低速开始，然后加...
复制链接

扫一扫

专栏目录