CSSAnimation
Googleでログイン問題4：キラッと光るボタンを作ろう
以下のコードを使ってください
あらかじめエディタに書くコード
<div class="btn">ここをクリック</div>
¥HTML¥
.btn{
position: relative;
padding: 10px 0;
background-color: #dddddd;
text-align: center;
color: black;
width: 200px;
cursor: pointer;
box-shadow: 0 5px #bbbbbb;
transition: .5s;
}
.btn:active{
transform: translateY(5px);
box-shadow: 0 0 #bbbbbb;
}
.btn::before{
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
}
¥CSS¥
期待する画面
解答ソースコード
.btn{
overflow:hidden;
}
.btn::before{
animation: effect 3s infinite;
}
@keyframes effect {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
50% { transform: scale(0) rotate(45deg); opacity: 0.5; }
80% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
¥CSS¥
#忍者CODE無料問題集で活動を記録しよう
完了にする！
擬似要素beforeを使って上に色を塗るといったイメージです。
基本的に物体が動く時少しづつ動き出してから速度が早くなっていきますよね。
なのでアニメーションが終わりに近くにつれて変化が大きくなるようにすると自然に見えます。
数字は解答の通りでなくてもいいのですが、さっき言ったことは意識しておいてほしいです。
animationは@keyframesを使って定義した動きを呼び出すことができます。パーセンテージの中にその時に応じた指示を書くことで時間と共に変化するアニメーションが作れます。
animationにinfiniteを適用することによってアニメーションを指定の時間ごとに行います。