在Safari CSS3边框半径的动画过渡不工作 [英] css3 border radius animation transition in safari not working

问题描述

试图对Safari浏览器中的图像边界半径的CSS3过渡轻松的工作。

Trying to have a css3 ease transition work on border radius of an image in Safari.

这只是有点闪烁进入悬停状态，而不是平稳过渡。
任何帮助深表AP preciated

It just kinda blinks into the hover state instead of smooth transition. Any help is much appreciated

code：

<style>
.all a:hover img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
    -webkit-filter: grayscale(0%);
}
.all a img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width: 50%;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
.all a img {
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.all a img {
    -webkit-filter: grayscale(100%);
    transition: border-radius .3s ease;
    -moz-transition: -moz-border-radius .3s ease,border-radius .3s ease;
    -webkit-transition: -webkit-border-radius .3s ease,border-radius .3s ease;

}
</style>

<ul class="thumbs">
    <li class="all identity">
        <a href="projects/project_identity/index.html"><img src="http://imjoeybrennan.com/images/logos_t.jpg" alt="Logos"/></a>
    </li>
</ul>

链接到该站点：
http://imjoeybrennan.com

推荐答案

这是一个简单的修复，Safari浏览器不支持从像素为百分比的过渡。如果从50％更改hover样式为100px，你会看到你的转换将工作的顺利开展。

This is a simple fix, Safari does not support the transition from pixels to percentages. If you change your hover styles from 50% to 100px you will see that your transitions will work smoothly.

.all a:hover img {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px
    border-radius: 100px;

}

您可能需要将它们设置为一个双重的任何值的高度和图像宽度，以确保徘徊时，他们总是会四舍五入。

You may want to set them to any value that is double the height and width of your images to ensure they will always be rounded when hovered.

这篇关于在Safari CSS3边框半径的动画过渡不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！