css-extra-kf1

by jeanmichelricher

HTML

<section>
<div class="square"></div>
</section>

CSS

section {
    margin: 50px;
    padding: 40px;
    background: wheat;
    height: 100px;
}

.square {
  width: 100px;
  height: 100px;
  background: green;
  animation: fade_in 5s infinite;
}

/* Animation fade_in */
@keyframes fade_in {
    0% { opacity: 0; }
    50% { opacity: 0.5; }
    100% { opacity: 1; background : red }
}