page アニメーション

最終更新：2021/08/03

参考：https://qiita.com/soarflat/items/4a302e0cafa21477707f

アニメーション付きボタンです。
アニメーションの例用に持ってきたのでボタンのページではなく、このページに入れています。

html

<div class="bt_ani"><a href="">READ MORE</a></div>

1	<div class="bt_ani"><a href="">READ MORE</a></div>

css

/* bt_ani */
.bt_ani{
	display: block;
}
.bt_ani a{
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	font-weight: 400;
	font-size: 1.4rem;
	display: inline-block;
	border-bottom: 1px #000 solid;
	padding-right: 4.5rem;
	line-height: 1.5;
	position: relative;
	color: #000;
}
.bt_ani a::before{
	content: " ";
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	background-color: #000;
	width: 30px;
	height: 1px;
	transition: .3s;
	-webkit-animation: btani 1.8s ease 0s infinite running;
	        animation: btani 1.8s ease 0s infinite running;
}
.bt_ani a::after{
	content: " ";
	display: inline-block;
	position: absolute;
	top: calc(50% - 4px);
	right: 0;
	border-top: 4px transparent solid;
	border-bottom: 4px transparent solid;
	border-left: 6px #000 solid;
	transition: .3s;
	-webkit-animation: btani 1.8s ease 0s infinite running;
	        animation: btani 1.8s ease 0s infinite running;
}
.bt_ani a:hover{
	text-decoration: none;
	color: #000;
}
.bt_ani a:hover::before,.bt_ani a:hover::after{
	right: -1rem;
}
@media screen and (min-width: 992px){
	.bt_ani a:hover::before,.bt_ani a:hover::after{
		right: -2rem;
	}
}
@media screen and (min-width: 1200px){
	.bt_ani a{
		font-size: 1.1rem;
		padding-right: 4rem;
		padding-left: 0.4rem;
		line-height: 2;
	}
	.bt_ani a::before{
		width: 25px;
	}
}
/* bt_ani end */
/*ani*/
@-webkit-keyframes btani {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  20% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  30% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  40% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes btani {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  20% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  30% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  40% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

/* bt_ani */

.bt_ani{

display: block;

}

.bt_ani a{

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

font-weight: 400;

font-size: 1.4rem;

display: inline-block;

border-bottom: 1px #000 solid;

padding-right: 4.5rem;

line-height: 1.5;

position: relative;

color: #000;

}

.bt_ani a::before{

content: " ";

display: block;

position: absolute;

top: 50%;

right: 0;

background-color: #000;

width: 30px;

height: 1px;

transition: .3s;

-webkit-animation: btani 1.8s ease 0s infinite running;

animation: btani 1.8s ease 0s infinite running;

}

.bt_ani a::after{

content: " ";

display: inline-block;

position: absolute;

top: calc(50% - 4px);

right: 0;

border-top: 4px transparent solid;

border-bottom: 4px transparent solid;

border-left: 6px #000 solid;

transition: .3s;

-webkit-animation: btani 1.8s ease 0s infinite running;

animation: btani 1.8s ease 0s infinite running;

}

.bt_ani a:hover{

text-decoration: none;

color: #000;

}

.bt_ani a:hover::before,.bt_ani a:hover::after{

right: -1rem;

}

@media screen and (min-width: 992px){

.bt_ani a:hover::before,.bt_ani a:hover::after{

right: -2rem;

}

@media screen and (min-width: 1200px){

.bt_ani a{

font-size: 1.1rem;

padding-right: 4rem;

padding-left: 0.4rem;

line-height: 2;

}

.bt_ani a::before{

width: 25px;

}

/* bt_ani end */

/*ani*/

@-webkit-keyframes btani {

0% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

10% {

-webkit-transform: translateX(4px);

transform: translateX(4px);

}

20% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

30% {

-webkit-transform: translateX(4px);

transform: translateX(4px);

}

40% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

100% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

@keyframes btani {

0% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

10% {

-webkit-transform: translateX(4px);

transform: translateX(4px);

}

20% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

30% {

-webkit-transform: translateX(4px);

transform: translateX(4px);

}

40% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

100% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

同じ「animation」を指定すれば同じアニメーションができます。

<p style="animation: btani 1.8s ease 0s infinite running;">同じ「animation」を指定すれば同じアニメーションができます。</p>

1	<p style="animation: btani 1.8s ease 0s infinite running;">同じ「animation」を指定すれば同じアニメーションができます。</p>

振り分けページへ戻る

トップへ戻る

page アニメーション

アニメーションボタン