texte animate css

<!DOCTYPE html>
<html>
<head>
  <title>Texte animer avec css | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keyword" content="Texte animer avec css">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>
  <span>A</span>
  <span>S</span>
  <span>S</span>
  <span>A</span>
  <span>L</span>
  <span>A</span>
  <span>M</span>
</h1>
</body>
</html>
html, body {
    width: 100%;  
    height: 100%;
    background: #76b852;
    background: -webkit-linear-gradient(to left, #76b852 , #8DC26F);
    background: linear-gradient(to left, #76b852 , #8DC26F);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  h1 {
    height: 100px;
  }
  
  h1 span {
    position: relative;
    top: 20px;
    display: inline-block;
    animation: bounce .3s ease infinite alternate;
    font-family: 'Titan One', cursive;
    font-size: 80px;
    color: #FFF;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 transparent,
                 0 7px 0 transparent,
                 0 8px 0 transparent,
                 0 9px 0 transparent,
                 0 10px 10px rgba(0, 0, 0, .4);
  }
  
  h1 span:nth-child(2) { animation-delay: .1s; }
  h1 span:nth-child(3) { animation-delay: .2s; }
  h1 span:nth-child(4) { animation-delay: .3s; }
  h1 span:nth-child(5) { animation-delay: .4s; }
  h1 span:nth-child(6) { animation-delay: .5s; }
  h1 span:nth-child(7) { animation-delay: .6s; }
  h1 span:nth-child(8) { animation-delay: .7s; }
  
  @keyframes bounce {
    100% {
      top: -20px;
      text-shadow: 0 1px 0 #CCC,
                   0 2px 0 #CCC,
                   0 3px 0 #CCC,
                   0 4px 0 #CCC,
                   0 5px 0 #CCC,
                   0 6px 0 #CCC,
                   0 7px 0 #CCC,
                   0 8px 0 #CCC,
                   0 9px 0 #CCC,
                   0 50px 25px rgba(0, 0, 0, .2);
    }
  }

                                    
Timeline style07

Timeline style07

Timeline style05

Timeline style05

Tablet style code texte

Tablet style code texte

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Image hover effects style

Image hover effects style

Form login b4 01

Form login b4 01

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Create icon animate with svg

Create icon animate with svg

Compteur avec b4

Compteur avec b4

Cards box with title

Cards box with title

Arrows Defense Game

Arrows Defense Game