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

                                    
input radio checkbox b4 style

input radio checkbox b4 style

Vers le haut

Vers le haut

Responsive image grid

Responsive image grid

Loading Style snake

Loading Style snake

Input file style02

Input file style02

Image hover 05

Image hover 05

Google Style Login

Google Style Login

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Créer une input search animée

Créer une input search animée

Compteur avec b4

Compteur avec b4

Carousel Bootstrap3

Carousel Bootstrap3

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu