矢印が伸びるCSSアニメーションサンプル
要素の外からにょきーっと矢印が伸びてくるCSSアニメーションサンプルを紹介しています。
矢印が伸びるCSSアニメーション
CSSだけで作成する矢印が画面外、あるいは要素の外側から伸びてくるアニメーションデザインの実装サンプルとサンプルコードになります。
伸びる矢印アニメーション。
これまた需要があるのかわからないモノを作りましたが、いつもの事ですか。
4方向分セットで記述していますので、わかりにくいかもですが下部にて個別にも紹介しています。
See the Pen CSS | Arc move animation by yochans (@yochans) on CodePen.
HTML部分にはコンテナとなる親要素「.container」をdivで作成しています。
矢印はクラス名「.arrow」を作成し、4方向分の追加クラス名を付けています。
<div class="container">
<div class="arrow left-to-right"></div>
<div class="arrow light-to-left"></div>
<div class="arrow top-to-bottom"></div>
<div class="arrow bottom-to-top"></div>
</div>いくつか「vw」を使った指定がありますが、これはPCならばブラウザの表示領域幅、スマホなら画面幅、その割合で100vwで100％と捉えていて問題ありません。
矢印の三角部分にwidthを指定すると向きや棒の部分の指定が難しくなりましたので、横幅についてはvwを使う事にしました。
逆に上から下、下から上へ移動する矢印のアニメーション指定はコンテナとなる親要素の高さを参照する為に％で指定しています。
コンテナ要素になる「.container」には要素がはみ出した分を非表示にする overflow: hidden が必要です。
矢印部分、アニメーション部分に関しては下記にて個別に紹介しています。
.container {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
/* background: #000; */
}
.arrow {
position: absolute;
border-left: 50px solid #808080;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.arrow::before {
content: "";
position: absolute;
top: -7.5px;
left: -50px;
width: 120vw;
height: 15px;
background: #808080;
transform-origin: left center;
transform: rotate(-180deg);
}
.left-to-right {
top: 20%;
border-left-color: #4169e1;
transform: rotate(0);
animation: left-to-right-anim 4s linear infinite;
}
.left-to-right::before {
background: #4169e1;
}
.light-to-left {
top: 60%;
border-left-color: #ff6347;
transform: rotate(-180deg);
animation: light-to-left-anim 4s linear infinite;
}
.light-to-left::before {
background: #ff6347;
}
.top-to-bottom {
left: 30vw;
border-left-color: #32cd32;
transform: rotate(90deg);
animation: top-to-bottom-anim 4s linear infinite;
}
.top-to-bottom::before {
background: #32cd32;
}
.bottom-to-top {
left: 70vw;
border-left-color: #ff69b4;
transform: rotate(-90deg);
animation: bottom-to-top-anim 4s linear infinite;
}
.bottom-to-top::before {
background: #ff69b4;
}
@keyframes left-to-right-anim {
0% {
left: -20vw;
}
100% {
left: 120vw;
}
}
@keyframes light-to-left-anim {
0% {
right: -20vw;
}
100% {
right: 120vw;
}
}
@keyframes top-to-bottom-anim {
0% {
top: -20%;
}
100% {
top: 120%;
}
}
@keyframes bottom-to-top-anim {
0% {
bottom: -20%;
}
100% {
bottom: 120%;
}
}矢印部分
矢印はデフォルトで右向きのものを作成、サンプルの三角部分の数値は適当で正三角形ではありません。
関連：CSS | 正三角形（Equilateral Triangle）の作り方 | ONE NOTES
棒の部分は疑似要素 before で作成しています。
アニメーションで拡大縮小しているのではなく、最初から必要な長さ、120vwで画面幅より広い幅をとっています。
上下の縦に移動させている矢印にとっては長すぎますが、非表示なのでそのままです。
また、棒の部分は、transform-originで回転の基準点を左、縦は中央に設定、180度回転させて三角の反対側に来るようにしています。
サンプルから編集する場合は、アニメーションを止めると矢印が要素の範囲内になく表示されないことに注意して下さい。
.arrow {
position: absolute;
border-left: 50px solid #4169e1;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.arrow::before {
content: "";
position: absolute;
top: -7.5px;
left: -50px;
width: 120vw;
height: 15px;
background: #4169e1;
transform-origin: left center;
transform: rotate(-180deg);
}以下が矢印が進む方向に合わせて追記、上書きしている部分です。
ベースが右向きの矢印なので、transform: rotate()の値は「0deg」ですが、左向きにする場合は「-180deg」を指定します。
beforeの背景色も変更して、三角と同じ色にします。
アニメーション指定はサンプル用に無限を指定していますが、終了したら止めるなど目的にあわせて変更して下さい。
@keyframes top-to-bottom-anim {
0% {
top: -20%;
}
100% {
top: 120%;
}
}また上下の縦移動は、親要素の高さにあうように％で指定しています。
.left-to-right {
top: 20%;
border-left-color: #4169e1;
transform: rotate(0);
animation: left-to-right-anim 4s linear infinite;
}
.left-to-right::before {
background: #4169e1;
}矢印アニメーション
0％時の初期位置をleftを「-20vw」に指定して左端より更に少し左に設置、アニメーション完了時は右にはみ出る形で「120vw」を指定しています。
「vw」とはPCならばブラウザの表示領域幅、スマホなら画面幅の割合で、100vwで100％と捉えていて問題ありません。
@keyframes left-to-right-anim {
0% {
left: -20vw;
}
100% {
left: 120vw;
}
}