Parsing CSS3 transition browser compatibility

高洛峰
Release: 2017-03-24 14:26:54
Original
1724 people have browsed it

1. Compatibility

According to canius, the transition compatibility is as shown below:

解析CSS3 transition浏览器兼容性

<!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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template