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

                                    
Timeline style02

Timeline style02

Scroll down button 01

Scroll down button 01

Pagination with Jquery

Pagination with Jquery

Loading style water animation

Loading style water animation

Loading Style snake

Loading Style snake

Lightbox gallery style01

Lightbox gallery style01

Form login et créer un compte style01

Form login et créer un compte style01

Créer une input search animée

Créer une input search animée

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Alert Bootstrap4 style01

Alert Bootstrap4 style01