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

                                    
Triangle Background css 01

Triangle Background css 01

Timeline style07

Timeline style07

Social Media Icons

Social Media Icons

Radio button style

Radio button style

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Input range slider HTML style01

Input range slider HTML style01

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

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Card Bootstrap4 01

Card Bootstrap4 01

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Animation 3d social icones avec css3

Animation 3d social icones avec css3