【CSS100%】@keyframesを使ったループさせても違和感のないアニメーション集

Author

トッド(Todd)

CSS3の@keyframesを使用したアニメーションのパターンを作成してみました。

ループで動かしても違和感の少ない動きにしたのでjavascriptが使えなくてもWebページに自然に取り入れることが出来ると思います。

トッド

気になるアニメーションを見つけたら要素の上で「タップorクリック」をしてもらうと、ソースコードが表示されるよ。

@Keyframesで動かすCSSアニメーション一覧

1.弾んで傾く




弾んで傾く

HTML

<div class="bounce-Lean">
~ココに動かしたい要素(見出しとか)~
</div>
CSS

.bounce-Lean {
       animation-name: bounce-Lean;
	-webkit-animation-name: bounce-Lean;	

	animation-duration: 2.1s;	
	-webkit-animation-duration: 2.1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
  
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
	
     transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;  
}

@keyframes bounce-Lean {
	0% {
		transform: translateY(0%) scaleY(0.6);
        opacity:1;
	}
	40%{
		transform: translateY(-50%) scaleY(1);
        opacity:1;
	}
	50%{
		transform: translateY(5%) scaleY(0.90) scaleX(1.1);
        opacity:1;
	}
	60%{
		transform: translateY(-10%) scaleY(1.05) scaleX(1);
        opacity:1;
	}	
	70%{
		transform: translateY(0%) scaleY(0.95) scaleX(1);
        opacity:1;
	}				
	80%{
		transform: rotate(6deg) translateY(0%) scaleY(1.1) scaleX(1.1);
        opacity:1;
	}	
    90%{
		transform: rotate(6deg) translateY(0%) scaleY(0.9) scaleX(1);
        opacity:0.1;
	}	
    100%{
		transform: rotate(6deg) translateY(0%) scaleY(1) scaleX(1);
        opacity:0;
	}
}

@-webkit-keyframes bounce-Lean {
	0% {
		-webkit-transform: translateY(0%) scaleY(0.6);
        -webkit-opacity:1;
	}
	40%{
		-webkit-transform: translateY(-50%) scaleY(1);
        -webkit-opacity:1;
	}
	50%{
		-webkit-transform: translateY(5%) scaleY(0.90) scaleX(1.1);
        -webkit-opacity:1;
	}
	60%{
		transform: translateY(-10%) scaleY(1.05) scaleX(1);
        -webkit-opacity:1;
	}	
	70%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
        -webkit-opacity:1;
	}				
	80%{
		-webkit-transform: rotate(6deg) translateY(0%) scaleY(1.1) scaleX(1.1);
        -webkit-opacity:1;
	}	
    90%{
		-webkit-transform: rotate(6deg) translateY(0%) scaleY(0.9) scaleX(1);
        -webkit-opacity:0.1;
	}	
    100%{
		-webkit-transform: rotate(6deg) translateY(0%) scaleY(1) scaleX(1);
        -webkit-opacity:0;
	}
}


2.横に伸縮する




横に伸縮

HTML

<div class="Stretch">
~ココに動かしたい要素~
</div>
CSS

.Stretch {
	animation-name: Stretch;
	-webkit-animation-name: Stretch;	

	animation-duration: 1.7s;	
	-webkit-animation-duration: 1.7s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;
  
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
	
     transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;  
}

@keyframes Stretch {
	0% {
		transform: translateX(0%) scaleX(1);
	}
	40%{
		transform: translateX(-8%) scaleX(1.1) scaleY(0.95);
	}
	50%{
		transform: translateX(5%) scaleY(1.05) scaleX(1);
	}
	60%{
		transform: translateX(-3%) ;
	}	
	70%{
		transform: translateX(3%) ;
	}				
	80%{
		transform: translateX(-1%) ;
	}	
    90%{
		transform: translateX(1%) ;
	}	
    100%{
		transform: translateX(0%) ;
	}
}
@-webkit-keyframes Stretch {
	0% {
		-webkit-transform: translateX(0%) scaleX(1);
	}
	40%{
		-webkit-transform: translateX(-8%) scaleX(1.1) scaleY(0.95);
	}
	50%{
		-webkit-transform: translateX(5%) scaleY(1.05) scaleX(1);
	}
	60%{
		-webkit-transform: translateX(-3%) ;
	}	
	70%{
		-webkit-transform: translateX(3%) ;
	}				
	80%{
		-webkit-transform: translateX(-1%) ;
	}	
    90%{
		-webkit-transform: translateX(1%) ;
	}	
    100%{
		-webkit-transform: translateX(0%) ;
	}
}


3.「あいうえお」の動き




「あいうえお」の動き

HTML

<div class="AIUEO">
~ココに動かしたい要素~
</div>
CSS

.AIUEO {
	animation-name: AIUEO;
	-webkit-animation-name: AIUEO;	

	animation-duration: 1.8s;	
	-webkit-animation-duration: 1.8s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
  
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
	
     transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;  
}

@keyframes AIUEO {
	0% {
		transform:  scaleY(0.8);
        opacity:0;
	}
	40%{
		transform:  scaleX(0.9);
	}
	50%{
		transform:  scaleY(1.3);
	}
	60%{
		transform:  scaleX(1.2);
	}	
	70%{
		transform:  scaleY(0.8);
	}				
	80%{
		transform:  scaleX(0.9);
	}	
    90%{
		transform:  scaleY(1.3);
	}	
    100%{
		transform:  scaleX(1.2);
        opacity:1;
	}
}
@-webkit-keyframes AIUEO {
	0% {
		-webkit-transform:  scaleY(0.8);
        opacity:0;
	}
	40%{
		-webkit-transform:  scaleX(0.9);
	}
	50%{
		-webkit-transform:  scaleY(1.3);
	}
	60%{
		-webkit-transform:  scaleX(1.2);
	}	
	70%{
		transform:  scaleY(0.8);
	}				
	80%{
		-webkit-transform:  scaleX(0.9);
	}	
    90%{
		-webkit-transform:  scaleY(1.3);
	}	
    100%{
		-webkit-transform:  scaleX(1.2);
        opacity:1;
	}
}


4.上下にホバー




上下にホバー

HTML

<div class="Up-Down">
~ココに動かしたい要素~
</div>
CSS

.Up-Down {
	animation-name: Up-Down;
	-webkit-animation-name: Up-Down;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;
  
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
	
     transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;  
}

@keyframes Up-Down {
	0% {
		transform:  translateY(-20%) ;
	}
    50% {
		transform:  translateY(20%) ;
	}
    100%{
		transform:  translateY(-20%);
	}
}
@-webkit-keyframes Up-Down {
	0% {
		-webkit-transform:  translateY(-20%) ;
	}
    50% {
		-webkit-transform:  translateY(20%) ;
	}
    100%{
		-webkit-transform:  translateY(-20%);
	}
}


5.ハムッとする動き




ハムッとする動き/p>

HTML

<div class="Hamu">
~ココに動かしたい要素~
</div>
CSS

.Hamu {
	animation-name: Hamu;
	-webkit-animation-name: Hamu;	

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
  
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
	
     transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;  
}

@keyframes Hamu {
	0% {
		transform:  translateY(-20%) ;
	}
    50% {
		transform:  translateY(20%) scaleX(0.8) scaleY(1.2);
	}
    100%{
		transform:  translateY(-20%) scaleY(1);
	}
}
@-webkit-keyframes Hamu {
	0% {
		-webkit-transform:  translateY(-20%) ;
	}
    50% {
		-webkit-transform:  translateY(20%) scaleX(0.8) scaleY(1.2);
	}
    100%{
		-webkit-transform:  translateY(-20%) scaleY(1);
	}
}


6.瞬きする動き




瞬きする動き

HTML

<div class="Blink">
~ココに動かした要素~
</div>
CSS

.Blink {
	animation-name: Blink;
	-webkit-animation-name: Blink;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
  
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
	
     transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;  
}

@keyframes Blink {
	0% {
		transform:  translateY(-30%) ;
	}
    50% {
		transform:  translateY(20%) ;
	}
    100%{
		transform:  translateY(-20%) scaleY(0);
	}
}
@-webkit-keyframes Blink {
	0% {
		-webkit-transform:  translateY(-30%) ;
	}
    50% {
		-webkit-transform:  translateY(20%) ;
	}
    100%{
		-webkit-transform:  translateY(-20%) scaleY(0);
	}
}




~追記予定あり~

コメントを残す

メールアドレスが公開されることはありません。