#banner {
height: 250px;
width: 300px;
background: #454f78;
overflow: hidden;
}
#banner a {
height: 100%;
width: 100%;
display: block;
position: relative;
overflow: hidden;
animation: 1s fadein ease-in-out;
animation-fill-mode: forwards;
}
#rotary {
background: url(rotary.png) center center no-repeat;
background-size: 100% auto;
margin: 0 auto;
position: absolute;
width: 500px;
height: 500px;
margin-top: -100px;
margin-left: -100px;
animation: 20s roty infinite linear;
}
#produk {
margin: 0px auto 0 auto;
display: block;
z-index: 10;
width: 150px;
position: relative;
opacity: 0;
animation: 1s growin ease-in-out 1s;
animation-fill-mode: forwards;
}
#tombol {
color: #fff;
padding: 8px 15px 8px 15px;
font-family: 'Roboto Slab';
font-weight: 700;
font-size: 15px;
background: #3ba7d1;
display: inline-block;
margin: 10px 0 0 0;
border-bottom: 2px solid rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
border-radius: 3px;
opacity: 0;
animation: 1s fadein ease-in-out 2s;
animation-fill-mode: forwards;
}
#diskon {
text-align: center;
position: absolute;
bottom: 20px;
width: 100%;
z-index: 10;
}
#diskon-text {
color: #fff;
font-family: 'Roboto Slab';
font-size: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
opacity: 0;
animation: 1s fadein ease-in-out 1.5s;
animation-fill-mode: forwards;
}
#emblem {
box-sizing: border-box;
color: #fff;
padding: 10px 0 0 0;
font-weight: 800;
font-family: 'Roboto Slab';
font-size: 16px;
text-align: center;
width: 70px;
height: 70px;
background: #fea60f;
border: solid 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
display: inline-block;
border-radius: 50%;
transform: rotate(345deg);
animation: 1s fadein ease-in-out;
-webkit-transition-delay: 6s;
transition-delay: 6s;
position: absolute;
opacity: 0;
transform: rotate(0deg);
top: 0px;
right: 0px;
z-index: 10;
animation: 1s rollin ease-in-out 2.5s;
animation-fill-mode: forwards;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes roty {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rollin {
0% {
opacity: 0;
transform: rotate(0deg);
top: 0px;
right: 0px;
}
100% {
opacity: 1;
transform: rotate(345deg);
top: 40px;
right: 40px;
}
}
@keyframes growin {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}