CSS Animation Example: Loading & Text Effects

Open In Editor Publish Your Code

body {
            background:url("https://vinixodin.com/thumb.jpg") no-repeat center center;
            background-color: black;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

/* Código snippet */
        .codigo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #272822;
            color: #F8F8F2;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 18px;
            padding: 20px;
            border-radius: 8px;
            white-space: pre-line;
            text-align: left;
            line-height: 1.6;
            max-height: 25%;
            max-width: 75%;
            width: 75%;
            height: 25%;
            top:15%;
            overflow-y: hidden;
            box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
        }

.selector       { color: #F92672; }
        .property       { color: #66D9EF; }
        .value-number   { color: #AE81FF; }
        .value-string   { color: #E6DB74; }
        .value-color    { color: #A6E22E; }
        .function       { color: #A6E22E; }

/* Exemplo de elemento de código */
        .loading-element {
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }

/* Contêiner da animação */
        .animation-container {
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50%;
            overflow: hidden;
            background: transparent;
        }

/* Camadas da animação */
        .animation-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(90deg, #00b6a9, #00a1c1);
            animation: ripple 2s forwards;
            opacity: 0;
        }

@keyframes ripple {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            100% {
                opacity: 1;
                transform: scale(1.5);
            }
        }

/* Elemento de texto animado */
        .animation-container::first-child {
            font-size: 48px;
            font-weight: bold;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            padding: 20px;
            animation: fade-in 1s forwards;
        }

@keyframes fade-in {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

/* Elementos do fundo da animação */
        .animation-container::nth-child(3) {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.2);
            animation: slide-in 2s infinite;
        }

.animation-container::nth-child(4) {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: rgba(255, 255, 255, 0.3);
            animation: slide-in 2s infinite;
        }

@keyframes slide-in {
            0% {
                transform: translateX(-100%);
            }
            50% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100%);
            }
        }

/* Elementos que apenas aparecem na segunda execução da animação */
        .animation-container::nth-child(5) {
            position: absolute;
            top: 50%;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: rgba(255, 0, 0, 0.5);
            animation: pulse 1s infinite;
            opacity: 0;
        }

@keyframes pulse {
            0% {
                background-color: rgba(255, 0, 0, 0);
            }
            50% {
                background-color: rgba(255, 0, 0, 0.5);
            }
            100% {
                background-color: rgba(255, 0, 0, 0);
            }
        }

.animation-container::nth-child(6) {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 20px;
            background-color: rgba(0, 255, 0, 0.5);
            animation: shift 1s infinite;
        }

@keyframes shift {
            0% {
                transform: translateX(-100%);
            }
            50% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100%);
            }
        }

/* Controle de layout na execução da animação */
        .animation-container::nth-child(7) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 255, 0.2);
            animation: rotate 2s infinite;
        }

@keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(360deg);
            }
            100% {
                transform: rotate(720deg);
            }
        }

/* Adicionando um micro-detale que apenas aparece na segunda execução da animação */
        .animation-container::nth-child(8) {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            animation: blink 1s infinite;
            opacity: 0;
        }

@keyframes blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

/* Adicionando um micro-detale que apenas aparece na segunda execução da animação */
        .animation-container::nth-child(9) {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%);
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.5);
            animation: pulse 1s infinite;
            opacity: 0;
        }

@keyframes pulse {
            0% {
                background-color: rgba(255, 255, 255, 0);
            }
            50% {
                background-color: rgba(255, 255, 255, 0.5);
            }
            100% {
                background-color: rgba(255, 255, 255, 0);
            }
        }

/* Adicionando um micro-detale que apenas aparece na segunda execução da animação */
        .animation-container::nth-child(10) {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0, 255, 255, 0.5);
            animation: shift 1s infinite;
            opacity: 0;
        }

/* Definindo as animações principais do exemplo */
        @keyframes loading-animation {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(0);
            }
        }

.animation-container::nth-child(11) {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: rgba(255, 0, 0, 0.5);
            animation: pulse 1s infinite;
            opacity: 0;
        }

.animation-container::nth-child(12) {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0, 255, 0, 0.5);
            animation: shift 1s infinite;
            opacity: 0;
        }

/* Código snippet */

</style>
</head>
<body>
    <div class="animation-container">
        <div class="animation-container::before"></div>
        <div class="animation-container::first-child">EXEMPLO DE TEXTO ANIMADO</div>
        <div class="animation-container::nth-child(3)"></div>
        <div class="animation-container::nth-child(4)"></div>
        <div class="animation-container::nth-child(5)"></div>
        <div class="animation-container::nth-child(6)"></div>
        <div class="animation-container::nth-child(7)"></div>
        <div class="animation-container::nth-child(8)"></div>
        <div class="animation-container::nth-child(9)"></div>
        <div class="animation-container::nth-child(10)"></div>
        <div class="animation-container::nth-child(11)"></div>
        <div class="animation-container::nth-child(12)"></div>
    </div>
</body>
</html>
```

CSS

/* 
  Base foundation
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background:url("./thumb.jpg") no-repeat center center;
  background-color: black;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  aspect-ratio: 9/16;
}

.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 25%;
  max-width: 75%;
  width: 75%;
  height: 25%;
  top:15%;
  overflow-y: hidden;
  box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
}

.selector       { color: #F92672; }
.property       { color: #66D9EF; }
.value-number   { color: #AE81FF; }
.value-string   { color: #E6DB74; }
.value-color    { color: #A6E22E; }
.function       { color: #A6E22E; }

.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: transparent;
  aspect-ratio: 9/16;
}

/* 
  Layers e motivação emocional
*/
.loading-element {
  background-color: #333333;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  animation: loading-animation 1s linear infinite;
  position: relative;
}

@keyframes loading-animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.layer1 {
  width: 100%;
  height: 100%;
  background-color: #4D4D4D;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.layer1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #3F3F3F;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* 
  Micro-detalhes para o replay value
*/
.layer2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3F3F3F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: detalhe 2s linear infinite;
}

@keyframes detalhe {
  50% {
    transform: scale(1);
    background-color: #666666;
  }
  100% {
    transform: scale(0);
    background-color: #3F3F3F;
  }
}

/* 
  Interações entre camadas e elementos
*/
.layer3 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #2F2F2F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: interacao 2s linear infinite;
}

@keyframes interacao {
  50% {
    transform: scale(1);
    background-color: #777777;
  }
  100% {
    transform: scale(0);
    background-color: #2F2F2F;
  }
}

CSS Animation Example: Loading & Text Effects

Recommended

HTML CSS Contact Form

CSS Liquid Glass Button Hover Effect

Gradient Login Form HTML CSS

HTML

CSS

JS

Recommended

HTML CSS Contact Form

CSS Liquid Glass Button Hover Effect

Gradient Login Form HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS