使瀏覽器中的CSS3動畫更可靠

HTML

<div class="heart heart1"></div> 
<div class="heart heart2"></div>

CSS3

html, body{ 
    width: 100%; 
    height: 100%; 
    min-width: 500px; 
    min-height: 500px; 
    overflow: hidden; 
} 
.heart { 
    position: absolute; 
    width: 100px; 
    height: 90px; 
    top: 50%; 
    left: 50%; 
    margin-top: -45px; 
    margin-left: -50px; 
} 
.heart:before, 
.heart:after { 
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 50px; 
    height: 80px; 
    background: #fc2e5a; 
    border-radius: 50px 50px 0 0; 
    transform: rotate(-45deg); 
    transform-origin: 0 100%; 
} 
.heart:after { 
    left: 0; 
    transform: rotate(45deg); 
    transform-origin :100% 100%; 
} 
.heart1{ 
    animation: heart-anim 1s linear .4s infinite; 
} 
.heart2{ 
    animation: pounding .5s linear infinite alternate; 
} 
.heart1:after, .heart1:before{ 
    background-color: #ff7693; 
} 

@keyframes pounding{ 
    0%{ transform: scale(1.5); } 
    100%{ transform: scale(1); } 
} 
@keyframes heart-anim { 
    46% { 

    transform: scale(1); 
    } 
    50% { 
    transform: scale(1.3); 
    } 
    52% { 
    transform: scale(1.5); 
    } 
    55% { 
    transform: scale(3); 
    } 
    100% { 
    opacity: 0; 
    transform: scale(50); 
    } 
}

這裏檢查它：http://codepen.io/RadValentin/pen/sfnCE

正如你可以看到好的工作，但是，如果我確切的代碼發佈到我的本地服務器或jsfiddle它不再工作：http://jsfiddle.net/40aydbfr/

我相信動畫不是根據最佳實踐製作的，因爲它非常容易打破。

那麼，爲什麼它不能在codepen之外工作，我怎樣才能使它更加跨瀏覽器兼容。

PS：我使用Chrome。

來源

2014-12-18 DomingoSL

它不起作用，因爲您缺少-webkit-瀏覽器的供應商前綴。

它在codepen上工作的原因是，如果您單擊CSS窗口上方的設置按鈕，您將看到-prefix-free已啓用，這意味着它會自動添加前綴。

Always check browser support, if something doesn't work。

Updated Codepen

Updated Fiddle

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-width: 500px; 
 
    min-height: 500px; 
 
    overflow: hidden; 
 
} 
 
.heart { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 90px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -45px; 
 
    margin-left: -50px; 
 
} 
 
.heart:before, 
 
.heart:after { 
 
    position: absolute; 
 
    content: ""; 
 
    left: 50px; 
 
    top: 0; 
 
    width: 50px; 
 
    height: 80px; 
 
    background: #fc2e5a; 
 
    border-radius: 50px 50px 0 0; 
 
    transform: rotate(-45deg); 
 
    transform-origin: 0 100%; 
 
} 
 
.heart:after { 
 
    left: 0; 
 
    transform: rotate(45deg); 
 
    transform-origin: 100% 100%; 
 
} 
 
.heart1 { 
 
    -webkit-animation: heart-anim 1s linear .4s infinite; 
 
    animation: heart-anim 1s linear .4s infinite; 
 
} 
 
.heart2 { 
 
    -webkit-animation: pounding .5s linear infinite alternate; 
 
    animation: pounding .5s linear infinite alternate; 
 
} 
 
.heart1:after, 
 
.heart1:before { 
 
    background-color: #ff7693; 
 
} 
 
@-webkit-keyframes pounding { 
 
    0% { 
 
    transform: scale(1.5); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
} 
 
@keyframes pounding { 
 
    0% { 
 
    transform: scale(1.5); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes heart-anim { 
 
    46% { 
 
    transform: scale(1); 
 
    } 
 
    50% { 
 
    transform: scale(1.3); 
 
    } 
 
    52% { 
 
    transform: scale(1.5); 
 
    } 
 
    55% { 
 
    transform: scale(3); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(50); 
 
    } 
 
} 
 
@keyframes heart-anim { 
 
    46% { 
 
    transform: scale(1); 
 
    } 
 
    50% { 
 
    transform: scale(1.3); 
 
    } 
 
    52% { 
 
    transform: scale(1.5); 
 
    } 
 
    55% { 
 
    transform: scale(3); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(50); 
 
    } 
 
}

<div class="heart heart1"></div> 
 
<div class="heart heart2"></div>

來源

2014-12-18 20:54:32

使瀏覽器中的CSS3動畫更可靠

回答

相關問題