欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS3动画

程序员文章站 2022-06-23 15:13:16
...

Animation 组成
CSS3 Animation 是由三部分组成。

1.关键帧(@keyframes)
关键帧(keyframes) - 定义动画在不同阶段的状态。
动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。
css属性 - 就是css元素不同关键帧下的状态。

案例：创建了一个@keyframes命名为dropdown。

关键帧主要分为3个阶段，0%、50%、100%。 动画播放时长为6s、循环播放(infinite)、以linear方式进行播放。
修改的元素属性为margin-top

.list div:first-child {
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
    0% { margin-top: 0px;}
   /** 暂停效果 */
   10% { margin-top: 0px;}
   50% { margin-top: -100px;}
   60% { margin-top: -100px;}
   90% { margin-top: -200px;}
  100% { margin-top: -200px;}
}

  @keyframes dropdown {
    0% { top: 0; left:0px;}
    30% { top: 300px; left:0px;}
    50% { top: 150px; left:0px;}
    70% { top: 300px; left:0px;}
    80% { top: 0px;  left:-200px;}
    100% { top: 0px;  left:0px;}
  }

2.动画属性
动画属性可以理解为播放器的相关功能，一个最基本的播放器应该具有：播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。
主要也分为两大点：
animation:
[animation-name] ：动画的名称、持续时间
[animation-timing-function]：关于时间的函数(properties/t)、延迟时间
[animation-iteration-count] ： 播放次数、播放顺序
[animation-fill-mode]： 播放前或停止后设置相应样式、控制动画运行或暂停
3、时间函数（animation-timing-function）

animation-timing-function属性定义了动画的播放速度曲线。
可选配置参数为:
ease、ease-in、ease-out、ease-in-out、linear、
cubic-bezier(number, number, number, number)
默认值，如果没有显示写调用的函数，则默认为ease。

4.动画方向（animation-direction）

animation-direction属性表示CSS动画是否反向播放。
可选配置参数为:
single-animation-direction = normal | reverse | alternate | alternate-reverse
animation-direction: normal 正序播放
animation-direction: reverse 倒序播放
animation-direction: alternate 交替播放
animation-direction: alternate-reverse 反向交替播放
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

5、动画延迟（animation-delay）

animation-delay属性定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。
默认值0s，表示动画在该元素上后立即开始执行。
该值以秒(s)或者毫秒(ms)为单位。

4.动画迭代次数（animation-iteration-count）

animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。
默认值只播放一次。
single-animation-iteration-count = infinite | number

5.动画填充模式（animation-fill-mode）

animation-fill-mode是指给定动画播放前后应用元素的样式。
single-animation-fill-mode = **none **| **forwards **| **backwards **| both
animation-fill-mode: none 动画执行前后不改变任何样式
animation-fill-mode: forwards 保持目标动画最后一帧的样式
animation-fill-mode: backwards 保持目标动画第一帧的样式
animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。

6.动画播放状态（animation-timing-function）

animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。
默认值为running
single-animation-timing-function = running | paused
running 动画正常播放
paused 动画暂停播放

图片展示：

CSS3动画
CSS3动画

动画的播放次数（animation-iteration-count）
	值通常为整数，默认值为1
	特殊值infinite，表示动画无限次播放
动画的播放方向（animation-direction）
	normal，动画每次都是循环向前播放
	alternate，动画播放为偶数次则向前播放
动画的播放状态（animation-play-state）
	running将暂停的动画重新播放
	paused将正在播放的元素动画停下来
动画发生的操作（animation-fill-mode）
	forwards表示动画在结束后继续应用最后关键帧的位置
	backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
	both表示元素动画同时具有forwards和backwards的效果

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color: #2d303a;
			}
			div{
				text-align: center;
				margin: 400px auto;
			}
			span{
				position: relative;
				font: normal 500 6rem 'Varela Round', sans-serif;
				color: white;
				animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
				top: 0px;
			}
			span:nth-child(1) {
			  animation-delay: 0s;
			}
			span:nth-child(2) {
			  animation-delay: 0.0833333333s;
			}
			span:nth-child(3) {
			  animation-delay: 0.1666666667s;
			}
			span:nth-child(4) {
			  animation-delay: 0.25s;
			}
			span:nth-child(5) {
			  animation-delay: 0.3333333333s;
			}
			span:nth-child(6) {
			  animation-delay: 0.4166666667s;
			}
			span:nth-child(7) {
			  animation-delay: 0.520s;
			}
			@keyframes bounce {
			  0% {
			    top: 0;
			    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
			  }
			  100% {
			    top: -1em;
			    text-shadow: rgba(255, 255, 255, 0.9) 0 1em 0.35em;
			  }
			}
		</style>
		
	</head>
	<body>
		<div>
			<span >注</span>
			<span >定</span>
			<span >孤</span>
			<span >独</span>
			<span >终</span>
			<span >老</span>
		</div>
	</body>
</html>

弹跳小球：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹球动画</title>
    <style>
        .block{
            width:100px;
            height:100px;
            border-radius: 50%;
            background: linear-gradient(180deg,pink,deepskyblue);
            margin: 0 auto;
            animation: tanqiu 2s ease-in infinite alternate;
        }
        /*animation:自定义名称 动画执行时间 速度曲线 执行次数 逆向播放方法*/
        @keyframes tanqiu {
        /*写法1.将动画时间进行时间段划分，分别规定动画效果*/
            10%{
                margin-top:600px;}
            40%{
                margin-top:300px;
            }
            50%{
                margin-top:600px;
            }
            60%{
                margin-top:450px;
            }
            70%{
                margin-top:600px;
            }
            80%{
                margin-top:550px;
            }
            90%{
                margin-top:600px;
            }
        }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>
相关标签： 工作学习 css3

上一篇： Android识别预装的第三方App方法实例

下一篇： 开启redis-server提示 # Creating Server TCP listening socket *:6379: bind: Address already in use--解决方法

推荐阅读