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

input radio checkbox b4 style

input radio checkbox b4 style

Transitions Animations SVG Style01

Transitions Animations SVG Style01

SwiperJS style01

SwiperJS style01

Pie Charts

Pie Charts

Input range slider HTML style05

Input range slider HTML style05

Input range slider HTML style04

Input range slider HTML style04

Form Création de compte style animée

Form Création de compte style animée

Carousel Bootstrap4

Carousel Bootstrap4

Carousel Bootstrap3

Carousel Bootstrap3

Background overlay

Background overlay

Alert Bootstrap4 style02

Alert Bootstrap4 style02