HTML
<div class="wrapper">
<div class="lineTrigger">
<div class="line">
<div class="lineinappear">First</div>
</div>
</div>
<div class="flex">
<div class="bgextend bgLRextendTrigger"><span class="bgappearTrigger">First</span>
</div>
</div>
</div>
CSS
/* ::::: 枠線が伸びて出現 ::::: */
.lineTrigger{
position: relative; /* 枠線が書かれる基点 */
opacity:0;
}
.lineTrigger.lineanime{
animation-name:lineAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes lineAnimeBase{
from {
opacity:0;
}
to {
opacity:1;
}
}
/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
position: absolute;
content:"";
width:0;
height:1px;
background:rgba(254,0,26,0.5); /* 枠線の色*/
}
/*左右線*/
.line::before,
.line::after{
position: absolute;
content:"";
width: 1px;
height:0;
background:rgba(254,0,26,0.5); /* 枠線の色*/
}
/*上線*/
.lineTrigger::before {
top:0;
left:0;
}
/* 0秒後 */
.lineTrigger.lineanime::before {
animation: lineAnime .5s linear 0s forwards; /* 表示されて0秒後に上線が0.5秒かけて表示 */
}
/*右線*/
.line::before{
top:0;
right:0;
}
/* 0.5秒後 */
.lineTrigger.lineanime .line::before {
animation: lineAnime2 .5s linear .5s forwards;/* 表示されて0.5秒後に右線が0.5秒かけて表示 */
}
/*下線*/
.lineTrigger::after {
bottom:0;
right:0;
}
/* 1秒後 */
.lineTrigger.lineanime::after {
animation: lineAnime .5s linear 1s forwards;/* 表示されて1秒後に下線が0.5秒かけて表示 */
}
/*左線*/
.line::after{
bottom:0;
left:0;
}
/* 1.5秒後 */
.lineTrigger.lineanime .line::after {
animation: lineAnime2 .5s linear 1.5s forwards;/* 表示されて1.5秒後に左線が0.5秒かけて表示 */
}
@keyframes lineAnime {
0% {width:0%;}
100%{width:100%;}
}
@keyframes lineAnime2 {
0% {height:0%;}
100%{height:100%;}
}
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear{
animation: lineInnerAnime .5s linear 1.5s forwards;/* 1.5秒後に中央のエリアが0.5秒かけて表示 */
opacity: 0;/* 初期値を透過0にする */
font-size: 26px;
font-weight: 100;
text-align: center;
color: rgba(254,0,26,1);
}
@keyframes lineInnerAnime{
0% {opacity:0;}
100% {opacity:1;}
}
/* ::::: 背景色が伸びて出現 ::::: */
.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden; /* はみ出た色要素を隠す */
text-align: center;
padding: 4px 20px;
margin-top: 20px;
opacity:0;
}
@keyframes bgextendAnimeBase{
from {
opacity:0;
}
to {
opacity:1;
}
}
/*中の要素*/
.bgappear{
animation-name:bgextendAnimeSecond;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
color: rgba(254,0,26,1);
font-size: 26px;
font-weight: 100;
}
@keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* 左から */
.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:2s;
animation-fill-mode:forwards;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(254,0,26,0.05); /* 伸びる背景色の設定 */
}
@keyframes bgLRextendAnime{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(1);
}
}
/* スクロールをすると出現する要素にはじめに透過0を指定 */
.bgappearTrigger,
.bgLRextendTrigger{
opacity: 0;
}
/*========= レイアウトのためのCSS ===============*/
.wrapper{
overflow: hidden;
}
.flex{
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.lineTrigger{
width: 100px;
padding: 4px 20px;
text-align: center;
box-sizing:border-box;
margin: 0 auto;
}
.bgextend{
width: 90px;
padding: 4px 20px;
text-align: center;
box-sizing:border-box;
}
/* ::::: アニメーション設定 ::::: */
/* アニメーションの回数を決めるCSS*/
.count2{
animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}
.countinfinite{
animation-iteration-count: infinite;/*無限ループ*/
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05{
animation-delay: 0.5s;
}
.delay-time1{
animation-delay: 1s;
}
.delay-time15{
animation-delay: 1.5s;
}
.delay-time2{
animation-delay: 2s;
}
.delay-time25{
animation-delay: 2.5s;
}
/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05{
animation-duration: 0.5s;
}
.change-time1{
animation-duration: 1s;
}
.change-time15{
animation-duration: 1.5s;
}
.change-time2{
animation-duration: 2s;
}
.change-time25{
animation-duration: 2.5s;
}
jQuery
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
function fadeAnime(){
// lineTrigger
$('.lineTrigger').each(function(){ //lineTriggerというクラス名が
var elemPos = $(this).offset().top-50;//要素より、50px上の
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
$(this).addClass('lineanime');// 画面内に入ったらlineanimeというクラス名を追記
}else{
$(this).removeClass('lineanime');// 画面外に出たらlineanimeというクラス名を外す
}
});
// bgLRextendTrigger
$('.bgLRextendTrigger').each(function(){ //bgLRextendTriggerというクラス名が
var elemPos = $(this).offset().top-50;//要素より、50px上の
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
$(this).addClass('bgLRextend');// 画面内に入ったらbgLRextendというクラス名を追記
}else{
$(this).removeClass('bgLRextend');// 画面外に出たらbgLRextendというクラス名を外す
}
});
// bgappearTrigger
$('.bgappearTrigger').each(function(){ //bgappearTriggerというクラス名が
var elemPos = $(this).offset().top-50;//要素より、50px上の
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight){
$(this).addClass('bgappear');// 画面内に入ったらbgappearというクラス名を追記
}else{
$(this).removeClass('bgappear');// 画面外に出たらbgappearというクラス名を外す
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
fadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
fadeAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
</script>
<!-- reference: https://codepen.io/ugokuweb/pen/wvoQmNv -->