HTML5学习之CSS3动画
动画
动画(animation)是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画。通常用来实现复杂的动画效果
相比较过度，动画可以实现更多变化，更多控制，连续自动播放等效果。
1.1动画的基本使用
1.先定义动画
2.在使用(调用)动画
定义动画
@keyframes 动画名称 {
0% {
}
/* 节点 */
100% {
}
}动画序列:
0%是动画的开始 100%是动画的结束。这样的规则就是动画序列
在@keyframes中规定某项CSS样式 就能创建有当前样式逐渐改变为信阳市的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果.可以改变任意多的样式任意多的次数.
使用百分比来规定变化发生的时间,或用关键词"from"和"to" 等同于0% 和 100%
代码示例：
<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>动画</title>
<style>
/* 界面一打开 一个盒子就从左边走到右边 */
/* 定义动画 */
@keyframes move {
/* 开始装填 */
0% {
transform: translateX(0px);
}
/* 节点 结束状态*/
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s ;
}
/* */
</style>
</head>
<body>
<div></div>
</body>
</html>代码示例2：
<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>
/* 可以做多个状态的变化 keyframes 关键帧*/
/* 里面的百分比要是整数 */
/* 百分比是总的时间的划分 */
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(200px, 0);
}
50% {
transform: translate(200px, 200px);
}
75% {
transform: translate(0, 200px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 50px;
height: 50px;
background-color: pink;
animation-name: move;
animation-duration: 3s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>常用属性:
<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>动画属性</title>
<!-- @keyframes 定义动画 -->
<!-- animation:所有动画属性的简写属性 除了animation-play-state属性 -->
<!-- animation-name: 规定@keyframes动画的名称 必须的-->
<!-- animation-duration 动画时间 默认是0 必须的 -->
<!-- animation-timing-function 规定动画的速度曲线 默认是ease -->
<!-- animation-delay 动画延迟时间 过多少时间动画开始 -->
<!-- animation-iteration-count 规定动画被播放的次数 默认是1 还有infinite -->
<!-- animation-direction:规定动画是否在下一周期逆向播放 默认是normal altemate
逆向播放 -->
<!-- animation-play-state 规定动画是否正在运行或暂停 默认是running 还有pause -->
<!-- animation-fill-mode 规定动画结束后的状态 保持forwards 回到原来的状态 backwards-->
<style>
@keyframes move {
0% {
transform: translateX(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 1s;
/* 运动曲线 */
animation-timing-function: linear;
/* 延迟 */
animation-delay: 1s;
/* 动画次数 infinite 无限*/
/* animation-iteration-count: infinite; */
/* 是否逆向播放 默认normal alternate 逆向播放 */
animation-direction: alternate;
/* 动画播放一次后 是否回到起始状态 backwards回到起始状态 forwards停留在动画结束状态 */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过div 让div暂停动画 鼠标离开就继续动画*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>动画综合写法：
<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>动画属性</title>
<!-- @keyframes 定义动画 -->
<!-- animation:所有动画属性的简写属性 除了animation-play-state属性 -->
<!-- animation-name: 规定@keyframes动画的名称 必须的-->
<!-- animation-duration 动画时间 默认是0 必须的 -->
<!-- animation-timing-function 规定动画的速度曲线 默认是ease -->
<!-- animation-delay 动画延迟时间 过多少时间动画开始 -->
<!-- animation-iteration-count 规定动画被播放的次数 默认是1 还有infinite -->
<!-- animation-direction:规定动画是否在下一周期逆向播放 默认是normal altemate
逆向播放 -->
<!-- animation-play-state 规定动画是否正在运行或暂停 默认是running 还有pause -->
<!-- animation-fill-mode 规定动画结束后的状态 保持forwards 回到原来的状态 backwards-->
<style>
@keyframes move {
0% {
transform: translateX(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
/* animation-name: move; */
/* 持续时间 */
/* animation-duration: 1s; */
/* 运动曲线 */
/* animation-timing-function: linear; */
/* 延迟 */
/* animation-delay: 1s; */
/* 动画次数 infinite 无限*/
/* animation-iteration-count: infinite; */
/* 是否逆向播放 默认normal alternate 逆向播放 */
/* animation-direction: alternate; */
/* 动画播放一次后 是否回到起始状态 backwards回到起始状态 forwards停留在动画结束状态 */
/* animation-fill-mode: forwards; */
}
/* 上面的所有属性等效于 */
div {
/* 顺序 动画名称 动画时间 运动轨迹 延迟时间 重复次数 动画是都逆向 动画状态 名字和时间一定不能省略*/
animation: move 1s linear 1s infinite alternate;
}
div:hover {
/* 鼠标经过div 让div暂停动画 鼠标离开就继续动画*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>动画综合案例:
<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>动画简写</title>
<style>
/*
animation: 动画名称 持续时间 运动曲线 延迟时间 播放次数 是否反方向
动画起始或者结束的状态
*/
body {
background-color: #333;
}
.map {
position: relative;
margin: 0 auto;
width: 747px;
height: 617px;
background: url(../img/map.png) no-repeat;
}
.city {
position: absolute;
top: 228px;
right: 193px;
color: #fff;
}
.dotted {
width: 8px;
height: 8px;
background-color: #0099ff;
border-radius: 50%;
}
div[class^="pulse"] {
/* 保证小波纹水平垂直居中 放大之后中心向四周发散 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 0 6px #009dfd;
animation: pulse 1.4s linear infinite;
}
div[class$="2"] {
animation-delay: 0.4s;
}
div[class$="3"] {
animation-delay: 0.8s;
}
@keyframes pulse {
0% {}
70% {
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>
</body>
</html>速度曲线细节(animation-timing-function)
<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>
/* animation-timing-function 属性 */
/* linear 匀速 */
/* ease 动画低速开始 然后加快 在结束前变慢*/
/* ease-in 动画低速开始 */
/* ease-out 动画低速结束 */
/* ease-in-out 低速开始低速结束*/
/* steps() 指定了时间函数中的间隔数量(步长) */
div {
width: 0;
font-size: 20px;
background-color: pink;
/* 文字一行显示 */
white-space: nowrap;
overflow: hidden;
/* text-overflow: ellipsis; */
/* 分步长来走 分几步完成动画 分十步 每次走一步*/
animation: move 2s steps(13) forwards;
}
@keyframes move {
0% {
width: 0;
}
100% {
width: 250px;
}
}
</style>
</head>
<body>
<div>世纪佳缘-程序员的梦想佳地</div>
</body>
</html>动画案例：
<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(../img/bear.png);
/* 元素可以添加多个动画 用逗号分隔 */
animation: bear 1s steps(8) infinite, move 2s linear forwards;
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>