transition-timing-function
CSS transition-timing-function Property
The CSS transition-timing-function changes the speed of a transition over its duration. For instance making a transition start fast and ease to a slow stop, start slow and speed up, or run linear with no speed changes over the duration. It defaults to 'ease' if no timing function is specified.
Possible Values:
ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
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-timing-function (Chrome and Safari)
- -moz-transition-timing-function (Firefox)
- -ms-transition-timing-function (Internet Explorer)
- -o-transition-timing-function (Opera)
- transition-timing-function (Standard)
<!DOCTYPE html>
<html>
<style type="text/css">
div#myBox {
background-color: turquoise;
width: 150px;
padding: 20px;
transition-property: background-color, width;
transition-timing-function: linear, ease;
transition-duration: 0.5s, 0.5s;
}
div#myBox:hover {
background-color: magenta;
width: 300px;
}
</style>
<body>
<div id="myBox">hover over me</div>
</body>
</html>
0 Response to "transition-timing-function"
Post a Comment