Home >Web Front-end >CSS Tutorial >Parsing CSS3 transition browser compatibility
Parsing CSS3 transition browser compatibility
- 高洛峰Original
- 2017-03-24 14:26:541755browse
1. Compatibility
According to canius, the transition compatibility is as shown below:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
p:hover
{
width:300px;
}
</style>
</head>
<body>
<p></p>
<p>请把鼠标指针移动到蓝色的 p 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>When tested in IE7-9, the transition The effect has no transition effect (such as linear transition effect), but it still has an effect (immediate execution of transition-property, transition-duration, transition-timing-function, and transition-delay will not work)
The above is the detailed content of Parsing CSS3 transition browser compatibility. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS clever ways to implement CSS slashesNext article：CSS clever ways to implement CSS slashes