アニメーションとは何ですか
- アニメーションが
CSS3最も破壊的な特性の一つは、精密な制御が映画または複数のノードによって提供される基であってもよく、それによって、複雑なアニメーションを実現します
- アニメーションが
アニメーションの基本的な使用
- アニメーションを定義します
- 定義されたアニメーションの呼び出しで
構文（定義されたアニメーション）
/* keyframes: 关键帧 */ @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } }構文（アニメーション）
div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间； }アニメーションシーケンス
- 0％は、アニメーションの始まりである、アニメーションが100％を行って、そのルールは、アニメーションシーケンスです
- 徐々に現在のスタイルから変更@keyframsのCSSスタイルで指定されたアイテムは、アニメーションの新しいスタイルを作成しました
- アニメーション要素が徐々に別のスタイルの効果に一つのスタイルから変更することで多くのスタイルとして、何度でも変更することができます
- 所定の時間の変化率、又は有する
fromとto0％と100％に相当
コードは示してい
<style> div { width: 100px; height: 100px; background-color: aquamarine; animation-name: move; animation-duration: 0.5s; } @keyframes move{ 0% { transform: translate(0px) } 100% { transform: translate(500px, 0) } } </style>
demo1
<!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>
/* 我们想页面一打开，一个盒子就从左边走到右边 */
/* 1. 定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>九、アニメーションシーケンス
<!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>
/* from to 等价于 0% 和 100% */
/* @keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(1000px, 0);
}
} */
/* 动画序列 */
/* 1. 可以做多个状态的变化 keyframe 关键帧 */
/* 2. 里面的百分比要是整数 */
/* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10 = 2.5s */
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0)
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>アニメーションの共通属性
- 一般的な属性
のアニメーションの規定：@keyframesを。
アニメーション：すべてのアニメーションプレイ状態のプロパティに加えて、プロパティのアニメーションプロパティを速記しました。
アニメーション名：指定@keyframesアニメーションの名前。
アニメーション-期間：秒またはミリ秒の所定のアニメーションが完了する1サイクルを要し、0がデフォルトです。
アニメーションのタイミング機能：アニメーションカーブの所定の速度は、デフォルトでは「容易」です。
アニメーションの遅延：指定されたアニメーションを開始する際、デフォルトは0です。
アニメーションの繰り返しカウント：アニメーションが再生され、指定された回数は、デフォルトは1で、無限
アニメーション方向：指定し、次のサイクルでアニメーション逆転劇は、デフォルトでは、「通常」の代替リバースプレイであるかどうかを
アニメーションプレイ状態：アニメーションの規定あなたは、実行中または一時停止されているかどうか。デフォルトでは、「一時停止」があり、「実行中」されます。
アニメーションフィルモード：アニメーション州の規制の終了後、バック開始後方に転送保ちます。
コードは示してい
div { width: 100px; height: 100px; background-color: aquamarine; /* 动画名称 */ animation-name: move; /* 动画花费时长 */ animation-duration: 2s; /* 动画速度曲线 */ animation-timing-function: ease-in-out; /* 动画等待多长时间执行 */ animation-delay: 2s; /* 规定动画播放次数 infinite: 无限循环 */ animation-iteration-count: infinite; /* 是否逆行播放 */ animation-direction: alternate; /* 动画结束之后的状态 */ animation-fill-mode: forwards; } div:hover { /* 规定动画是否暂停或者播放 */ animation-play-state: paused; }
XI、アニメーション速記
アニメーションの速記
/* （1）动画名称 持续时间必须写；（2）持续时间 要在 何时开始 的前面 */ /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */ animation: name duration timing-function delay iteration-count direction fill-mode知識ポイント
- 含まれていません速記プロパティ
animation-paly-state - アニメーションを停止し
animation-paly-state: paused、他のマウスを使用した後などで頻繁にと。 - むしろ直接転送バックよりも、アニメーションに戻るには：
animation-direction: alternate - ボックスのアニメーションの後、終了位置で停止します。
animation-fill-mode: forwards
- 含まれていません速記プロパティ
コードは示してい
animation: move 2s linear 1s infinite alternate forwards;
詳細速度プロファイル
- 詳細速度プロファイル
animation-timing-function：デフォルトでは、アニメーションカーブの速度を指定ease
コードは示してい
div { width: 0px; height: 50px; line-height: 50px; white-space: nowrap; overflow: hidden; background-color: aquamarine; animation: move 4s steps(24) forwards; } @keyframes move { 0% { width: 0px; } 100% { width: 480px; } }
综合案例：大数据热点图
<!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"] {
/* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
/* 注意绝对定位的盒子水平居中、垂直居中的写法，除了translate，不要漏了top、left */
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: 透明度，0表示不透明。 */
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>速度曲线步长
<!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>
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>
熊を実行します
- コードは示してい
<!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(media/bear.png) no-repeat;
/* 我们元素可以添加多个动画， 用逗号分隔 */
animation: bear .4s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
/* 注意，是背景图移动，不是div盒子移动 */
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>