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 style02

toggle switch style02

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Table bootstrap with Datatable

Table bootstrap with Datatable

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Nav Menu style01

Nav Menu style01

Manual Slideshow

Manual Slideshow

Image hover 05

Image hover 05

Geocoded Locations

Geocoded Locations

Form login with background image changed style01

Form login with background image changed style01

Elastic Content Slider

Elastic Content Slider

Cards box with title

Cards box with title

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau