CSS3 Transition Tutorial – CSS3 Transition Reference

Last Updated on: April 17, 2020   Posted By: Web Design Reference

CSS3 Transition Tutorial: Learn CSS3 Transition Property, CSS3 Transition Property Reference Guide, Know what is CSS Transition Property and, CSS3 Transition property examples, Learn CSS3 Transition Effects. In this page to learn the Transition Property definition, how to use CSS3 Transition Property on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.

Define CSS3 Transition Property and its Usage?

CSS3 Transition: with the use of CSS3 Transition property we can easily add an effect to an element when it changes from one style to another style without using any javascript or flash script.

Properties of CSS3 Transition
  • Transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Changing some properties of an element with CSS3 Transition Effect

Hover Me
Transition Example
Example: CSS3 Transition Property.
.example-div {
width: 150px;
height: 100px;
background: #16a085;
color: #fff;
padding-top 20px;
-webkit-transition: background 1s,color 1s,width 1s,height 1s;
transition-property: background,color,width,height;
transition-duration: 1s,1s,1s,1s;
}

.example-div:hover {
background: #1ec7e6;
width: 200px;
height: 110px;
color: brown;
}
 
 

Changing multiple properties of an element with CSS3 Transition Effect

CSS3
Transition Example
Example: use of CSS3 Transition Property.
.animated-box {
width: 150px;
height: 100px;
padding: 10px;
float: left;
background: #16a085;
color: #fff;
position: absolute;
font-weight: bold;
font-size: 25px;
margin: 5px;
-webkit-border-radius: 5px;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,color 1s,width 1s,height 1s,font-size 1s;
border-radius: 5px;
opacity: 0.8;
text-shadow: 1px 0px 2px #000;
}

.animated-box:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0.9;
background: #1ec7e6;
width: 200px;
height: 100px;
font-size: 30px;
color: brown;
}
 

Web Design Reference Guide Android App for Website Developers

Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.

Also Related to This Page

 

Leave a Reply