在案例中，我给动画添加了一个cubic-bezier函数。
div { : coral; animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate; }
为了保证最好的浏览器支持，还必须添加私有前缀（没有添加前缀的代码如下）
div { : coral; animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate; } @keyframes square-to-circle { 0% { border-radius:0 0 0 0; background:coral; transform:rotate(0deg); } 25% { border-radius:50% 0 0 0; background:darksalmon; transform:rotate(45deg); } 50% { border-radius:50% 50% 0 0; background:indianred; transform:rotate(90deg); } 75% { border-radius:50% 50% 50% 0; background:lightcoral; transform:rotate(135deg); } 100% { border-radius:50%; background:darksalmon; transform:rotate(180deg); } }
这个在FireFox显示会有点异常，为了在FireFox有绝佳的显示效果，可以给div添加如下样式
outline: 1px solid transparent;下一篇：【译】利用HTML 5中的Menu和Menuitem元素快速创建菜单
相关文章
精彩导读
热门资讯
关注我们
