Up Down Animation With CSS Style01

<!DOCTYPE html>
<html>
<head>
	<title>UP DOWN ANIMATION WITH 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="UP DOWN ANIMATION WITH CSS">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container mt-5 mb-5">
    <div class="row text-center mx-auto">
      <div class="col-12 mb-5">
        <h1 class="text-center animated-up-to-down text-success">NGLESSON.COM</h1>
      </div>
      <div class="col-4 offset-4 mt-5">
        <img src="../../assets/imgs/logo/nglesson.png" class="img-fluid animated-up-to-down" alt="NGLESSON.COM" title="nglesson">
      </div>
    </div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
</body>
</html>

.animated-up-to-down {
    -webkit-animation: up-down 2s ease-in-out infinite alternate-reverse both;
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
@-webkit-keyframes up-down {
    0% {
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
    }
    100% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
    }
}
@keyframes up-down {
    0% {
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
    }
    100% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
    }
}
@-moz-keyframes up-down {
    0% {
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
    }
    100% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
    }
}

                                    
Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Image hover 02

Image hover 02

Input file style01

Input file style01

Input file style02

Input file style02

Lightbox gallery style01

Lightbox gallery style01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Profile page with b4

Profile page with b4

Titre section avec une anmation style01

Titre section avec une anmation style01

Vidéo background en html5 style01

Vidéo background en html5 style01