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);
    }
  }

                                    
toggle switch style03

toggle switch style03

Vidéo background en html5 style02

Vidéo background en html5 style02

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Login Bootstrap3

Login Bootstrap3

Image hover 05

Image hover 05

Header with background animate 01

Header with background animate 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é

Card Bootstrap4 01

Card Bootstrap4 01

Arrows Defense Game

Arrows Defense Game

Animation 3d social icones avec css3

Animation 3d social icones avec css3