CSS動畫/轉換屏幕

我將文本動畫顯示到屏幕的每個角落。在每個角落文字旋轉。這裏的問題在於，在右上角和左下角文本熄滅屏幕。我認爲這與輪換有關。CSS動畫/轉換屏幕

我的問題是我怎樣才能保持正確的位置在屏幕上的全文？

#lorem { 
    font-size: 50px; 
    color: red; 
    position: absolute; 
    top: 5%; 
    left: 5%; 
    animation: switch 10s linear infinite; 
} 
@keyframes switch { 
    0% { 
     bottom:auto; 
     top:3%; 
     left: 3%; 
     right: auto; 
     animation-timing-function: steps(1, end); 
    } 
    25% { 
     left:auto; 
     right:3%; 
     bottom: auto; 
     top: 3%; 
     animation-timing-function: steps(1, end); 
     transform: rotate(90deg); 
    } 
    50% { 
     top:auto; 
     bottom:3%; 
     right: 3%; 
     left: auto; 
     animation-timing-function: steps(1, end); 
     transform: rotate(180deg); 
    } 
    75% { 
     right:auto; 
     left:3%; 
     top: auto; 
     bottom: 3%; 
     animation-timing-function: steps(1, end); 
     transform: rotate(-90deg); 
    } 
} 

<span id="lorem">Lorem</span>

來源

2015-09-21 AC3

它在FF，並在不同的行爲章羅馬，很難理解你需要什麼 – areim

你必須改變我懷疑的'transform-origin'點。 –

改變您的轉換25％〜

transform: rotate(90deg) translate(50px,0px);

和75％至

transform: rotate(-90deg) translate(50px,0px);

fiddle

來源

2015-09-21 11:57:36

請注意，Chrome中的行爲與FF中的行爲不同，因爲注意到原始問題的評論。 –

在鉻中的行爲是正確的，我忘記爲我的轉換添加前綴 – AC3

@ li0n_za這是我需要的，但你也知道我怎麼能保持距邊界相同的距離，我沒有角落問題 – AC3

CSS動畫/轉換屏幕

回答

相關問題