transition

transition
CSS transition Property
The CSS transition property is shorthand for establishing one or more CSS transition properties in one line. The properties we target are transition-property, transition-duration, transition-timing-function and transition-delay. Use commas to separate each property's transition effects.

NOTE: We must use browser specific prefixes until this property's standard syntax is working in all browser software. Use all four of the following prefixes, then add the standard property last. This assures it will work in most browsing environments.
-webkit-transition (Chrome and Safari)
-moz-transition (Firefox)
-ms-transition (Internet Explorer)
-o-transition (Opera)
transition (Standard)

Shorthand your CSS transitions:

<!DOCTYPE html>
<html>
<style type="text/css">
div#myBox {
    background-color: grey;
    width: 150px;
    padding: 20px;
    transition: background-color 1s linear 0s, width 1s ease 0s;
}
div#myBox:hover {
    background-color: silver;
    width: 300px;
}
</style>
<body>
<div id="myBox">hover over me</div>
</body>
</html>
click here to code.
transition

0 Response to "transition"

Post a Comment
