Learn Web Development with Easy Notes
Master HTML, CSS, and JavaScript through simple, well-organized, and beginner-friendly notes.
Whether you're a student, beginner, or aspiring web developer, our platform provides clear explanations, examples, and practical concepts to help you build a strong foundation in web development.
Start Learning Today!
📚 Easy-to-understand notes
💻 Practical code examples
🚀 Beginner to advanced concepts
🎯 Free learning resources
Our Learning Resources
HTML Notes
Learn the structure of web pages with comprehensive HTML notes covering tags, forms, tables, semantic elements, and more.
CSS Notes
Understand styling techniques, layouts, animations, Flexbox, Grid, responsive design, and modern CSS concepts.
JavaScript Notes
Explore programming fundamentals, DOM manipulation, events, functions, objects, arrays, ES6 features, and interactive web development.
About Us
Welcome to Web Notes Hub, your learning partner for web development.
Our goal is to make learning HTML, CSS, and JavaScript simple, accessible, and effective for everyone. We provide structured notes and practical examples that help students and beginners understand web development concepts without confusion.
Our Mission
To provide high-quality and easy-to-understand web development notes that help learners build their skills and confidence.
What We Offer
HTML Tutorials & Notes
CSS Learning Resources
JavaScript Notes
Code Examples
Quick Revision Guides
Beginner-Friendly Explanations
CSS Transition
What is CSS Transition?
A CSS transition smoothly animates a property change from one value to another over a specified duration. It runs automatically when a property value changes (e.g., on :hover, class change, or JS update).
The CSS transition property is a shorthand property for:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
Syntax
selector{
transition: transition-property
transition-duration transition-timing-function
transition-delay;
}
Examples
.box{
transition: height 2s linear 0.5s;
}
What is CSS transition-property?
The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).
Syntax
selector{
transition:transition-property
transition-duration transition-timing-function
transition-delay;
}
Examples
.box{
transition: height 2s linear 0.5s;
}
What is CSS transition-delay?
TThe transition-delay property specifies when the transition effect will start.The transition-delay value is defined in seconds (s) or milliseconds (ms).
Syntax
selector{
transition: transition-property
transition-duration transition-timing-function
transition-delay;
}
Examples
.box{
transition: height 2s linear 0.5s;
}
What is CSS transition-duration?
The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
Syntax
selector{
transition: transition-property
transition-duration transition-timing-function
transition-delay;
}
Examples
.box{
transition: height 2s linear 0.5s;
}
What is CSS transition-timing-function?
The transition-timing-function property specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration.
Syntax
selector{
transition: transition-property
transition-duration transition-timing-function
transition-delay;
}
Examples
.box{
transition: height 2s linear 0.5s;
}
What is CSS ease?
Default value. Specifies a transition effect with a slow start, then fast, then end slowly.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
transition:height 2s ease 0s;
}
.box:hover
height: 125px;
}
OUTPUT
What is CSS ease-in?
Specifies a transition effect with a slow start.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
transition: width 2s ease-in 0s;
}
.box:hover
width:125px;
}
OUTPUT
What is CSS ease-out?
Specifies a transition effect with a slow end.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
transition: letter-spacing 2s
ease-out 0s;
}
.box:hover
letter-spacing:3px;
}
OUTPUT
What is CSS ease-in-out?
Specifies a transition effect with a slow start and end.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
transition:font-size 2s
ease-in-out 0s;
}
.box:hover
font-size:25px;
}
OUTPUT
What is CSS linear?
Specifies a transition effect with the same speed from start to end.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
transition:color 2s linear 0s;
}
.box:hover
color:black;
}
OUTPUT
Examples
What is CSS ease?
Default value. Specifies a transition effect with a slow start, then fast, then end slowly.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
animation: ease 2s ease 0s
infinite alternate;
}
@keyframes ease{
from{
background-color:red;
}
to{
background-color:black;
}
}
OUTPUT
What is CSS ease-in?
Specifies a transition effect with a slow start.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
animation: ease-in 2s ease-in 0s
infinite alternate;
}
@keyframes ease-in{
from{
margin-left:0cm;
}
to{
margin-left:3.5cm;
}
}
OUTPUT
What is CSS ease-out?
Specifies a transition effect with a slow end.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
animation: ease-out 2s ease-out
0s infinite normal;
}
@keyframes ease-out{
from{
font-family: 'Lobster Two', sans-serif;
}
to{
font-family: 'Audiowide', sans-serif;
}
}
OUTPUT
What is CSS ease-in-out?
Specifies a transition effect with a slow start and end.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
animation:ease-in-out 2s
ease-in-out 0s infinite reverse;
}
@keyframes ease-out{
from{
text-align:left;
}
to{
text-align:center;
}
}
OUTPUT
What is CSS linear?
Specifies a transition effect with the same speed from start to end.
HTML Example
HTML
<div class="box">
Hover Me
</div>
CSS
.box{
width: 100px;
height: 100px;
animation:linear 2s linear 0s
infinite alternate forwards;
}
@keyframes linear{
from{
line-height:50px;
}
to{
line-height:150px;
}
}