设置了一个隐藏的圆环，在页面开始时旋转露出。发现在IOS(safari)中过渡动画展示不完整，只展示了起始部分，后面直接跳转到结束状态了。

demo

.wrap {

width: 200px;

height: 100px;

margin: 50px auto;

position: relative;

overflow: hidden;

}

.circular {

height: 160px;

width: 160px;

border: 20px solid transparent;

border-top: 20px solid green;

border-right: 20px solid green;

position: absolute;

border-radius: 50%;

transform: rotate(-225deg);

transition: transform 2000ms ease-in;

left: 0;

top: 0;

}

.circular.start {

transform: rotate(-45deg);

}

.button {

margin: 20px auto;

background-color: #EEEEEE;

text-align: center;

padding: 10px 20px;

}

var is = true

$('.button').click(function () {

$('.circular').toggleClass('start', is)

is = !is

})

setTimeout(function () {

$('.button').click()

}, 100)

经过调试，有两个方法可以避免出现这个问题，

1.setTimeout 触发时机设置在500ms以上

2.外层.wrap 不设置overflow

感觉应该是IOS渲染机制的问题，这里不是很了解，有没有大神科普一下，顺便给下解决方案。