問題
cssのみでアニメーションを行うには？
解決策
css3の「animation」を使用して、「animation-name」を設定して「@keyframes」でアニメーションの詳細を記述することで実現することができます。
css3のanimationを使う
css3のanimationを使うことで、cssのみでアニメーションを行うことができます。
今回はcssのみでアニメーションを行う方法をご紹介します。
DEMOはこちら
アニメーションを表示
HTMLはこちら
要素「クラス：animate-box」を用意します。
<div class="animate-box">
<div class="inner">
<p class="text">アニメーションを表示</p>
</div>
</div>CSSはこちら
要素「クラス：animate-box」にcss3の「animation」を使用することで実現することができます。
- 「animation-name」を設定します。
- 「@keyframes」でアニメーションの詳細を設定します。
.animate-box{
display: block;
height: 100px;
position: relative;
background-color: #fef2ef;
}
.animate-box .inner{
display: block;
padding: 10px;
color: #F15A24;
background-color: #ffffff;
border: 1px solid #F15A24;
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: auto;
-webkit-animation-duration: 3s;
-webkit-animation-name: animate;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
animation-duration: 3s;
animation-name: animate;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@-webkit-keyframes animate {
0% {
bottom: 0;
}
15% {
bottom: 10px;
}
30% {
bottom: 0;
}
45% {
bottom: 10px;
}
60% {
bottom: 0;
}
100% {
bottom: 0;
}
}
@keyframes animate {
0% {
bottom: 0;
}
15% {
bottom: 10px;
}
30% {
bottom: 0;
}
45% {
bottom: 10px;
}
60% {
bottom: 0;
}
100% {
bottom: 0;
}
}ポイント!
- 「animation-name」で設定した名前で「@keyframes 設定した名前 { … }」を設定することで、アニメーションを行うことができます。
- 「animation-duration」で、アニメーションを行う時間を設定します。
「@keyframes」ではその時間を元に100%の換算で「0% { … } 50% { … } 100% { … }」という形式でアニメーションの設定を行います。 - 「animation-iteration-count」で「infinite」を設定することで、アニメーションを繰り返し実行することができます。
参考ページ
以下のサイトが、より詳しく解説してくれています。
【【CSS3】@keyframes と animation 関連のまとめ – Qiita】
https://qiita.com/7968/items/1d999354e00db53bcbd8
コメント