サンプル
これは「上からフェードインして戻りながらフェードアウト」します
これは「下からフェードインして、そのまま上方向にフェードアウト」します
コード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="stylesheet" href="style.css">
<title>フェードインからのフェードアウト</title>
</head>
<body>
<div class="main">
<p class="test1">これは「上からフェードインして戻りながらフェードアウト」します</p>
<p class="test2">これは「下からフェードインして、そのまま上方向にフェードアウト」します</p>
</div>
</body>
</html>CSS
.main{
color: black;
text-align: center;
}
/*上からフェード*/
.test1{
font-size: 20px;
animation-name: fadeDown; /*アニメーションの名前*/
animation-duration: 3.0s; /*アニメーション1回あたりの時間(秒)*/
animation-fill-mode: forwards;/*アニメーションの終了後に最後のキーフレームのスタイルを適用する*/
animation-iteration-count:infinite;/*繰り返す*/
opacity: 0;
}
@keyframes fadeDown{
0%{
opacity: 0;
transform: translateY(-50%);
}
50%{
opacity: 1;
transform: translateY(0%);
}
100%{
opacity: 0;
transform: translateY(-50%);
}
}
/*下からフェード*/
.test2{
font-size: 20px;
animation-name: fadeUp;
animation-duration: 3.0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes fadeUp{
0%{
opacity: 0;
transform: translateY(50%);
}
50%{
opacity: 1;
transform: translateY(0%);
}
100%{
opacity: 0;
transform: translateY(-50%);
}
}
横方向のverも！
これは「左からフェードインして戻りながらフェードアウト」します
これは「右からフェードインして、そのまま左方向にフェードアウト」します
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="stylesheet" href="style.css">
<title>フェードインからのフェードアウト</title>
</head>
<body>
<div class="main">
<p class="test3">これは「左からフェードインして戻りながらフェードアウト」します</p>
<p class="test4">これは「右からフェードインして、そのまま左方向にフェードアウト」します</p>
</div>
</body>
</html>CSS
.main{
color: black;
text-align: center;
}
/*左からフェード*/
.test3{
font-size: 20px;
animation-name: fadeLeft;
animation-duration: 3.0s;
animation-fill-mode: forwards;
animation-iteration-count:infinite;
opacity: 0;
}
@keyframes fadeLeft{
0%{
opacity: 0;
transform: translateX(-50%);
}
50%{
opacity: 1;
transform: translateX(0%);
}
100%{
opacity: 0;
transform: translateX(-50%);
}
}
/*右からフェード*/
.test4{
font-size: 20px;
animation-name: fadeRight;
animation-duration: 3.0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes fadeRight{
0%{
opacity: 0;
transform: translateX(50%);
}
50%{
opacity: 1;
transform: translateX(0%);
}
100%{
opacity: 0;
transform: translateX(-50%);
}
}関連記事
☆ページネーションのCSSデザイン☆
