CSS Tutorial
slide Left to right animation
Fade In Right Animation
CSS keyframe text up and down
CSS Tutorial
Introduction to CSS
CSS is stand for Cascading Style Sheet.
Cascading style sheets are used to format the layout of Web Pages.
CSS is case sensitive language.
CSS is a created by ” Hakon Wium Lie ” in 1994
CSS is publish by (W3C) world wide web consotium in 1996.
slide Left to right animation
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Test</title>
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;900&display=auto’);
.right_container {
–width: 300px;
–height: 100px;
width: var(–width);
overflow: hidden;
}
#right_slider {
–animation-duration: 12s;
height: var(–height);
width: calc(var(–width)*2); /* Adjust the width */
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-evenly;
}
.slide {
height: var(–height);
width: var(–width);
background-color: lightblue;
}
/* .slide:nth-child(1) {
background-color: lemonchiffon;
} */
#right_slider .first-slide {
–visible: 0;
–hidden: 200px; /* Adjust this value */
animation: var(–animation-duration) slide-right-animation 10s ease-in-out infinite, 2s pause-animation 10s ease-in-out infinite;
}
/* The pause animation */
@keyframes pause-animation {
0%, 100% {
transform: translateX(var(–visible));
}
50% {
transform: translateX(var(–hidden));
}
}
</style>
</head>
<body>
<div class=”right_container”>
<div id=”right_slider”>
<div class=’slide first-slide’></div>
</div>
</div>
</body>
</html>
Fade In Right Animation
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Fade In Right Animation</title>
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Staatliches&display=swap’);
.head {
color: #000;
animation: fadeInRight 1s ease-in-out;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(200px);
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<h1 class=”head”>Fade In Right Animation</h1>
</body>
</html>
CSS keyframe text up and down
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Test</title>
<link href=’https://fonts.googleapis.com/css?family=Raleway:400,200′ rel=’stylesheet’ type=’text/css’>
<link href=’https://fonts.googleapis.com/css?family=Titillium+Web:200′ rel=’stylesheet’ type=’text/css’>
<style>
/* Your wrapper styles */
/* Your span animation styles */
.span_cus1 {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
animation: move 10s;
animation-iteration-count: infinite;
animation-fill-mode: both; /* Keeps element in final state after animation */
font-size: 20px;
letter-spacing: 2px;
}
@keyframes move {
0% { top: 0px; }
20% { top: 0px; }
40% { top: -30px; }
60% { top: -50px; }
80% { top: -300px; }
100% { top: -300px; }
}
/* Delay each span’s animation */
#span2 { animation-delay: 7s; }
#span3 { animation-delay: 13s; }
#span4 { animation-delay: 19s; }
</style>
</head>
<body>
<div id=”wrapper”>
<span id=”span1 span_cus” class=”span_cus1″>hello1</span><br>
<span id=”span2 span_cus” class=”span_cus1″>hello2</span><br>
<span id=”span3 span_cus” class=”span_cus1″>hello3</span><br>
</div>
</body>
</html>