0
我一直在嘗試通過製作一個小私人站點來學習css動畫。 Joseph.how關鍵幀動畫在Chrome瀏覽器上工作,但在Safari瀏覽器上部分損壞
我希望標題從頁面中心開始很大,靠近頁面中心,向上移動,然後縮小並移動到左側。不幸的是,在使用Safari瀏覽器時,標題向左移動,但不是保持垂直居中,而是略微上升,然後在動畫完成後彈出回中間位置。
您可以在chrome上看到預期的行爲(尚未使用其他瀏覽器進行測試)。
編輯問題與前綴 仍然存在(括號內爲使用自動前綴擴展)
鏈接回購:https://github.com/JoeHowarth/joehowarth.me
EDIT 2的問題其實就是有標題,對關鍵幀,所以我分離了一個
.header-container {
width: 100%;
border-bottom: 1px #000 solid;
height: 40vh;
position: relative;
background-color: #000;
color: #eee;
-webkit-animation: banner-up 1s 2s ease-in-out forwards;
animation: banner-up 1s 2s ease-in-out forwards;
font-family: 'Lato';
.title {
font-size: 30px;
position: absolute;
top: 90%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-weight: 700;
letter-spacing: .5em;
font-size: 60px;
-webkit-animation: title-over 4s 2s ease-in-out forwards;
animation: title-over 4s 2s ease-in-out forwards;
span {
font-weight: 100;
letter-spacing: .1em;
font-style: italic;
}
}
nav {
width: 40vw;
height: 10%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: absolute;
top: -5vw;
right: 20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-animation: nav 1s 7s ease-out forwards;
animation: nav 1s 7s ease-out forwards;
-webkit-transition : all 2s ease;
transition: all 2s ease;
div {
width: 15vw;
height: 100%;
margin: 0 2px;
// border: 1px #333 solid;
background: #111;
&:hover {
background: #222;
}
&:active {
background: #2a2a2a;
font-size: 38px;
}
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 35px;
p {
text-align: center;
color: #eee;
display: block;
font-weight: 100;
}
}
}
}
// move title to left, make smaller
@keyframes title-over {
30% {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
45% {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
letter-spacing: .5em;
font-size: 60px;
}
65% {
letter-spacing: .5em;
}
100% {
top: 50%;
left: 10px;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
letter-spacing: .1em;
font-size: 40px;
}
}
@-webkit-keyframes title-over {
30% {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
45% {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
letter-spacing: .5em;
font-size: 60px;
}
65% {
letter-spacing: .5em;
}
100% {
top: 50%;
left: 10px;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
letter-spacing: .1em;
font-size: 40px;
}
}
HTML
<div class="header-container">
<header class="title">
JOSEPH.HOW<span>ARTH</span>
</header>
<!-- nav defaults to display:none, comes in w/ animation-->
<nav>
<div id="about-nav" href="#"><p>About Me</p></div>
<div id="proj-nav" href="#"><p>Projects</p></div>
<div id="resume-nav" href="#"><p>Resume</p></div>
</nav>
嗨,不幸加入WebKit的沒有解決的問題。除非我錯誤地使用了前綴。 – CenturionSC2