[英]CSS3 opacity transition not working in Safari
I've got a super-simple CSS3 transition: just an image that fades out. 我有一个非常简单的CSS3过渡:只是一张淡出的图像。
It works in all browsers except Safari (tested on Safari 8.0.7). 它适用于除Safari(在Safari 8.0.7上测试)以外的所有浏览器。 What am I missing? 我想念什么?
Here is the fiddle: https://jsfiddle.net/nerdess/9Lambqan/ 这是小提琴: https : //jsfiddle.net/nerdess/9Lambqan/
Here is the code: 这是代码:
.fade { background: url(https://placeimg.com/200/100) no-repeat; width: 200px; height: 100px; animation-duration: 3s; animation-iteration-count: 1; animation-name: fadeOut; animation-timing-function: ease-in; animation-fill-mode: forwards; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-name: fadeOut; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
<div class="fade"></div>
(I know that there are various stackoverflow posts aleady dealing with this topic but none had an answer that helped me!) (我知道有很多关于该主题的stackoverflow帖子,但是没有一个答案对我有帮助!)
Use -webkit-keyframes
使用-webkit-keyframes
.fade { background: url(https://placeimg.com/200/100) no-repeat; width: 200px; height: 100px; animation-duration: 3s; animation-iteration-count: 1; animation-name: fadeOut; animation-timing-function: ease-in; animation-fill-mode: forwards; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-name: fadeOut; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
<div class="fade"></div>
Take a look at this css-tricks page to view all compatibility as possible. 查看此css-tricks页面,以查看所有兼容性。
https://css-tricks.com/snippets/css/keyframe-animation-syntax/ https://css-tricks.com/snippets/css/keyframe-animation-syntax/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.