更新 2018.4.4 15:03閲覧 2598ジャンボトロンの背景色をグラデにしてアニメにする
@keyframes の background に linear-gradient が使えなかったので、.jumbotron を2つ作って重ねて上を透明にしたらできました。
<style>
#test0{white-space:normal;position:relative}
#test1
{
animation: c 5s ease-in-out infinite alternate;
background-image: linear-gradient(to bottom right, lavenderblush, lightpink);
color: linen;
position:absolute;
width:100%;
}
#test2
{
background-image: linear-gradient(to bottom left, ghostwhite, paleturquoise);
color: azure;
}
@keyframes c
{
from{opacity: 1}
to{opacity: 0}
}
</style>
<div class="position-relative" id="test0">
<div class="jumbotron position-absolute w-100 text-right" id="test1"><h1>赤い猫</h1></div>
<div class="jumbotron" id="test2"><h1>青い猫</h1></div>
</div>