CSS transition Property
CSS transition Property
CSS transition
property is a shorthand property of the following CSS properties
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerDiv p{
width: 100%;
text-align: center;
}
#outerdiv{
width: 100%;
height: 150px;
border: 1px solid #267326;
padding: 10px;
display: flex;
position: relative;
text-align: center;
}
#innerdiv{
width: 80px;
height: 80px;
background-color: teal;
color: #fff;
line-height: 4;
border: 1px solid #004d4d;
position: absolute;
top: 5%;
left: 1%;
transition: left 1s;
-webkit-transition: left 1s
}
#outerDiv:hover > #innerdiv{
left: 85%;
}
</style>
</head>
<body>
<h1>CSS transition Property</h1>
<div id="outerDiv">
<p>Hover Me</p>
<div id="innerDiv">Div</div>
</div>
</body>
</html>
Syntax
Using CSS
element{
transition: left 1s;
}
Using Javascript
object.style.transition="left 1s";
Animatable
No, transition property is not animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS transition property is all 0s ease 0s.
Property Value
The following table provides a list of values for CSS transition
property.
Value | Type | Explanation |
---|
transition-property | Required | Specifies the CSS properties to which a transition effect should be applied. |
transition-duration | Required | Specifies the length of time a transition animation should take to complete. |
transition-timing-function | Optional | Specifies the speed curve of the transition effect. |
transition-delay | Optional | Specifies the duration to wait before starting a property's transition effect when its value changes. |
Using JavaScript
In the following example, we will demonstrate how to change the CSS transition
property of an element using JavaScript.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerDiv p{
width: 100%;
text-align: center;
}
#outerdiv{
width: 100%;
height: 150px;
border: 1px solid #267326;
padding: 10px;
margin-bottom: 25px;
display: flex;
position: relative;
text-align: center;
}
#innerdiv{
width: 80px;
height: 80px;
background-color: teal;
color: #fff;
line-height: 4;
border: 1px solid #004d4d;
position: absolute;
top: 5%;
left: 1%;
}
#outerDiv:hover > #innerdiv{
left: 85%;
}
</style>
</head>
<body>
<h1>CSS transition Property</h1>
<div id="outerDiv">
<p>Hover Me</p>
<div id="innerDiv">Div</div>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("innerDiv");
function myFunction(){
x.style.transition = "left 1s";
x.style.WebkitTransition = "left 1s";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author