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

                                    
Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Simple Table With UIKIT

Simple Table With UIKIT

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Loading style water animation

Loading style water animation

Input range slider HTML style02

Input range slider HTML style02

Image hover Inspiration styles

Image hover Inspiration styles

Header Aside Footer Admin

Header Aside Footer Admin

Elastic Content Slider

Elastic Content Slider

Chercher un mot sur la liste

Chercher un mot sur la liste

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select