記事内に広告が含まれています。

CSSアニメーションでバウンドしたり回転したりいろいろ

CSS,HTML,JS , コーディング

CSSanimationとtransformプロパティを組み合わせた、面白い動きをご紹介します。

ちょっと変わった動きがあるだけで、リッチ感が増すと思うのでサイト作成の参考にしてみてください。
各コードをコピペで実装可能です。

こちらの記事は、CSSanimationの基本を理解していることを前提に書いています。
「CSSanimationって何？」という方は、基本について書いた下記の記事をよろしければご覧ください。

サイト内関連リンク

CSSでふわっとフェードインさせる方法！@keyframesアニメーション入門 – NatsukiMemo

1．Demo01

下の絵をマウスオーバーしてみてください。
バウンドします。
このアニメーションは、jpegでもSVGでも反応します。

<div><img class="demo01" src="画像のパス"></div>
		
img.demo01 {
	width: 300px;
	height: auto;
}
img.demo01:hover {
	-webkit-animation: demo01 0.8s linear 0s infinite;
	animation: demo01 0.8s linear 0s infinite;
}
@-webkit-keyframes demo01 {
	0% {
		-webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
	}
	15% {
		-webkit-transform: scale(0.9, 0.9) translate(0%, 5%);
	}
	30% {
		-webkit-transform: scale(1.3, 0.8) translate(0%, 10%);
	}
	50% {
		-webkit-transform: scale(0.8, 1.3) translate(0%, -10%);
	}
	70% {
		-webkit-transform: scale(1.1, 0.9) translate(0%, 5%);
	}
	100% {
		-webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
	}
}
@keyframes demo01 {
	0% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}
	15% {
		transform: scale(0.9, 0.9) translate(0%, 5%);
	}
	30% {
		transform: scale(1.3, 0.8) translate(0%, 10%);
	}
	50% {
		transform: scale(0.8, 1.3) translate(0%, -10%);
	}
	70% {
		transform: scale(1.1, 0.9) translate(0%, 5%);
	}
	100% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}
}

簡単に説明するとCSS9行目以下でtransformプロパティのscale()とtranslate()を使ってアニメーションを実現しています。
transformプロパティは、移動、回転、伸縮、傾斜の効果を2次元、3次元で指定できるプロパティです。

transform: scale();

scale()を指定すると、要素を拡大縮小できます。
下記のように記述することで二次元での拡大縮小を表現できます。

transform: scale(X軸,Y軸);

元々の大きさは、scale(1.0, 1.0)となり、1.0より大きければ拡大、小さければ縮小することになります。

transform: translate();

translate()を指定すると、上下左右の移動を表現できます。
下記のように記述することで二次元での移動を表現できます。

transform: translate(X軸,Y軸);

%（相対値）で指定した場合は、指定した要素自体が基準となります。

2．Demo02

<div class="demo02">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>	 
</div>	
		
.demo02 span {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: pink;
	-webkit-animation: demo02 1.5s 0s infinite;
	animation: demo02 1.5s 0s infinite;
}
@-webkit-keyframes demo02 {
	0%, 100% {
		-webkit-transform: scale(0);
	}
	10% {
		-webkit-transform: translate(-250px, 0);
	}
	20% {
		-webkit-transform: scale(1);
	}
	50% {
		-webkit-transform: scale(1.2, 0.8);
	}
	60% {
		-webkit-transform: scale(0.8, 2);
	}
	70% {
		-webkit-transform: scale(1);
	}
	80% {
		-webkit-transform: scale(1.2, 0.8);
	}
}
@keyframes demo02 {
	0%, 100% {
		transform: scale(0);
	}
	10% {
		transform: translate(-250px, 0);
	}
	20% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2, 0.8);
	}
	60% {
		transform: scale(0.8, 2);
	}
	70% {
		transform: scale(1);
	}
	80% {
		transform: scale(1.2, 0.8);
	}
}

translate()のX軸の数値にマイナスを指定することで、左からスライドインしているように 見せることができます。(CSS37行目)

3．Demo03

<div class="demo03">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>	 
</div>
		
.demo03 span {
	display: inline-block;
	width: 100px;
	height:100px;
	margin-top:100px;
	margin-bottom:60px;
	border-radius: 50%;
　　background: linear-gradient(340deg, rgb(100, 0, 100), rgb(100, 50, 250), rgb(100, 200, 250));
　　background: -webkit-linear-gradient(340deg, rgb(100, 0, 100), rgb(100, 50, 250), rgb(100, 200, 250));
　　background: -ms-linear-gradient(340deg, rgb(100, 0, 100), rgb(100, 50, 250), rgb(100, 200, 250));
　　background: -moz-linear-gradient(340deg, rgb(100, 0, 100), rgb(100, 50, 250), rgb(100, 200, 250));
	
	-webkit-animation: demo03 1.5s 0s infinite;
	animation: demo03 1.5s 0s infinite;
}

.demo03 span:nth-child(1){
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.demo03 span:nth-child(2){
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.demo03 span:nth-child(3){
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.demo03 span:nth-child(4){
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.demo03 span:nth-child(5){
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
.demo03 span:nth-child(6){
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
@-webkit-keyframes demo03 {
		0%, 100% {
	
		-webkit-transform: scale(1);
	}
		
	30% {
		-webkit-transform:translate(0,-160px);
	}
	50% {
	-webkit-transform: scale(1);
	}

	80% {
		-webkit-transform:translate(0,160px);
	}
	90% {
	
		-webkit-transform: scale(1,2);
	}
	95% {
	
		-webkit-transform: scale(1.2, 0.8);
	}	
}
@keyframes demo03 {
		0%, 100% {
	
		transform: scale(1);
	}
		
	30% {
		transform:translate(0,-160px);
	}
	50% {
	transform: scale(1);
	}

	80% {
		transform:translate(0,160px);
	}
	90% {
	
		transform: scale(1,2);
	}
	95% {
	
		transform: scale(1.2, 0.8);
	}	
}

Demo03では、span要素のそれぞれにanimation-delayを指定しています。
animation-delayは、アニメーションの遅延時間を指定することができるプロパティです。
上記はCSS17行目から40行目で0.2秒ずつずらしてアニメーションの開始を遅延させています。

4．Demo04

	<div><img src="画像のパス" class="demo04"></div>	
	
.demo04 {
    width: 300px;
    height: auto;
    -webkit-animation: 2s linear infinite demo04;
    animation: 2s linear infinite demo04;
}
@-webkit-keyframes demo04 {
    0% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes demo04 {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

Demo04ではtransformプロパティのrotate()を使っています。(CSS7行目以下)

transform: rotate();

transformプロパティのrotate()は、要素を回転させます。
下記のように記述します。

transform:rotate(角度deg);

単位はdegで、回転の角度を指定します。
rotate(360deg)で一回転します。

5．Demo05

◎
	<div class="demo05">◎</div>	
	
.demo05 {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	font-size: 40px;
	color: #fff;
	line-height: 160px;
	text-align: center; 
	background: linear-gradient(to right, #43C6AC 0%, #d9e653 100%);
	-webkit-animation: 2s linear infinite demo05;
	animation: 2s linear infinite demo05;
}
@-webkit-keyframes demo05 {
	0% {
		-webkit-transform: rotate(0);
	}
	50% {
		background: linear-gradient(to right, #8673af 0%, #ff8aef 100%);
	}
	100% {
		-webkit-transform: rotateY(360deg);
	}
}
@keyframes demo05 {
	0% {
		transform: rotate(0);
	}
	50% {
		background: linear-gradient(to right, #8673af 0%, #ff8aef 100%);
	}
	100% {
		transform: rotateY(360deg);
	}
}

rotate()は、rotateX()はX軸を中心に回転、rotateY()はY軸を中心に回転させることができます。
また@keyframesの50%のところで色を変えることで、表裏違う色の円が回転しているように見せることができます。

まとめ

animationプロパティとtransformプロパティを組み合わせれば、実用的かどうかは別にしていくらでも様々な動きを生み出せるので、いろいろ試してみると面白いと思います。

この記事が、お役にたてるものになっていると嬉しいです。

【番外】WEB制作習得におすすめの本

スポンサーリンク

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。

スポンサーリンク

スポンサーリンク
スポンサーリンク

当ブログ利用サーバー

スポンサーリンク
スポンサーリンク