コピペでできる！CSSとhtmlだけのcss animationで作る矢印アクション5種

CSS HTML
 2018.02.22
 2018.03.19

ランディングページやキャンペーンサイトなどでは全画面イメージからスクロールさせるような場合が多くあります。
下にスクロールさせたいけど矢印に気づいてもらえないなんてことになってはもともこもありませんね。
そこで使えるのが、スクロールを促すための矢印アクションです。
css animationを使った目立ちすぎず、でも気がつきやすい矢印をご用意しました。

browser:  65 11 20 10 

css animationで作る矢印アクション[5種]

ふわふわと上下に動く

ニャン易度 
<div class="cp_arrows">
<a href="#" class="cp_arrow"></a>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.cp_arrows .cp_arrow {
	position: relative;
	display: inline-block;
	padding-top: 1.8em;
	-webkit-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
	-webkit-animation: arrow-move06 2s 1s ease-in-out infinite;
	        animation: arrow-move06 2s 1s ease-in-out infinite;
	text-decoration: none;
	color: #26c6da;
	border-color: #26c6da;
}
.cp_arrows .cp_arrow:before {
	font-size: 2em;
	line-height: 1.9em;
	position: absolute;
	top: 0;
	left: 50%;
	width: 2em;
	height: 2em;
	margin-left: -0.7em;
	content: '▼';
	-webkit-transition: transform 0.5s ease-in;
	        transition: transform 0.5s ease-in;
	text-align: center;
	border: 0.13em solid #ffffff;
	border-color: inherit;
	border-radius: 10em;
}
.cp_arrows .cp_arrow:hover {
	color: #ec407a;
	border-color: #ec407a;
}
.cp_arrows .cp_arrow:hover:before {
	transform: rotate(360deg);
}
@-webkit-keyframes arrow-move06 {
	0% {
		top: 1%;
		opacity: 0.1;
	}
	70% {
		top: 5%;
		opacity: 1;
	}
	100% {
		top: 1%;
		opacity: 0.3;
	}
}
@keyframes arrow-move06 {
	0% {
		top: 1%;
		opacity: 0.1;
	}
	70% {
		top: 5%;
		opacity: 1;
	}
	100% {
		top: 1%;
		opacity: 0.3;
	}
}

上から下へ入れ替わるように動く

ニャン易度 
<div class="cp_arrows">
	<div class="cp_arrow"></div>
	<div class="cp_arrow"></div>
	<div class="cp_arrow"></div>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrow {
	position: absolute;
	left: 50%;
	width: 60px;
	height: 10px;
	-webkit-transform: scale(0.3);
	        transform: scale(0.3);
	-webkit-animation: arrow-move07 3s ease-out infinite;
	        animation: arrow-move07 3s ease-out infinite;
	opacity: 0;
}
.cp_arrows .cp_arrow:first-child {
	-webkit-animation: arrow-move07 3s ease-out 1s infinite;
	        animation: arrow-move07 3s ease-out 1s infinite;
}
.cp_arrows .cp_arrow:nth-child(2) {
	-webkit-animation: arrow-move07 3s ease-out 2s infinite;
	        animation: arrow-move07 3s ease-out 2s infinite;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	content: '';
	border-radius: 2px;
	background: #2196f3;
}
.cp_arrows .cp_arrow:before {
	left: 1px;
	-webkit-transform: skewY(30deg);
	        transform: skewY(30deg);
}
.cp_arrows .cp_arrow:after {
	right: 1px;
	width: 50%;
	-webkit-transform: skewY(-30deg);
	        transform: skewY(-30deg);
}
@-webkit-keyframes arrow-move07 {
	25% {
		opacity: 0.6;
	}
	43.75% {
		-webkit-transform: translateY(1em);
		        transform: translateY(1em);
		opacity: 0.8;
	}
	62.5% {
		-webkit-transform: translateY(2em);
		        transform: translateY(2em);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(3em) scale(0.5);
		        transform: translateY(3em) scale(0.5);
		opacity: 0;
	}
}
@keyframes arrow-move07 {
	25% {
		opacity: 0.6;
	}
	43.75% {
		-webkit-transform: translateY(1em);
		        transform: translateY(1em);
		opacity: 0.8;
	}
	62.5% {
		-webkit-transform: translateY(2em);
		        transform: translateY(2em);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(3em) scale(0.5);
		        transform: translateY(3em) scale(0.5);
		opacity: 0;
	}
}

上から下へ流れるように動く

ニャン易度 
<div class="cp_arrows">
	<div class="cp_arrow cp_arrowfirst"></div>
	<div class="cp_arrow cp_arrowsecond"></div>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;/*画面いっぱいにする場合100vh*/
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrow {
	position: absolute;
	top: 50%;/*着地点（サンプルは[class:cp_arrows]height300pxの50%）*/
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	opacity: 0;
}
.cp_arrows .cp_arrowfirst {
	-webkit-animation: arrow-move08 2s ease-in-out infinite;
	        animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
	-webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
	        animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30px;
	height: 3px;
	content: '';
	background: #E91E63;
}
.cp_arrows .cp_arrow:before {
	-webkit-transform: rotate(30deg) translateX(-39%);
	        transform: rotate(30deg) translateX(-39%);
	-webkit-transform-origin: top left;
	        transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
	-webkit-transform: rotate(-30deg) translateX(39%);
	        transform: rotate(-30deg) translateX(39%);
	-webkit-transform-origin: top right;
	        transform-origin: top right;
}
@-webkit-keyframes arrow-move08 {
	0% {
		top: 40%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes arrow-move08 {
	0% {
		top: 40%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

上下にバウンドして動く

ニャン易度 
<div class="cp_arrows">
<div class="cp_arrow cp_bounce"></div>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrow {
	position: absolute;
	top: calc(50% - 25px);
	left: 50%;
	width: 40px;
	height: 40px;
}
.cp_arrows .cp_arrow::before,
.cp_arrows .cp_arrow::after {
	position: absolute;
	display: block;
	width: 3px;
	height: 30px;
	content: '';
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
	-webkit-transform: translate(-50%, -50%) rotateZ(-60deg);
	        transform: translate(-50%, -50%) rotateZ(-60deg);
	transform-origin: bottom right;
	border-radius: 10px;
	background: #f4511e;
}
.cp_arrows .cp_arrow::after {
	-webkit-transform: translate(-50%, -50%) rotateZ(60deg);
	        transform: translate(-50%, -50%) rotateZ(60deg);
	-webkit-transform-origin: bottom left;
	        transform-origin: bottom left;
}
.cp_arrows .cp_bounce {
	-webkit-animation: arrow-move09 2s infinite ease-in-out;
	        animation: arrow-move09 2s infinite ease-in-out;
}
@-webkit-keyframes arrow-move09 {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
	48% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
	60% {
		-webkit-transform: translateY(-15px);
		        transform: translateY(-15px);
	}
}
@keyframes arrow-move09 {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
	48% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
	60% {
		-webkit-transform: translateY(-15px);
		        transform: translateY(-15px);
	}
}

上の矢印がバウンドして消える

ニャン易度 
<div class="cp_arrows">
<div class="cp_arrow"></div>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrow,
.cp_arrows .cp_arrow:before {
	position: absolute;
	left: calc(50% - 10px);
	content: '';
}
.cp_arrows .cp_arrow {
	top: calc(50% - 18px);
	width: 36px;
	height: 36px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-width: 0 3px 3px 0;
	border-style: solid;
	border-color: transparent #d81b60 #d81b60 transparent;
}
.cp_arrows .cp_arrow:before {
	top: calc(50% - 10px);
	width: 20px;
	height: 20px;
	-webkit-animation: arrow-move10 2s infinite ease-in-out;
	animation: arrow-move10 2s infinite ease-in-out;
	border-width: 0 2px 2px 0;
	border-style: solid;
	border-color: transparent #d81b60 #d81b60 transparent;
}
@-webkit-keyframes arrow-move10 {
	0% {
		opacity: 0.3;
	}
	5% {
		opacity: 1;
	}
	100% {
		transform: translate(-8px, -8px);
		opacity: 0;
	}
}
@keyframes arrow-move10 {
	0% {
		opacity: 0.3;
	}
	5% {
		opacity: 1;
	}
	100% {
		transform: translate(-8px, -8px);
		opacity: 0;
	}
}

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？