如何在CSS/LESS中爲這個序列創建動畫？

這是我第一次進入動畫領域。我正嘗試創建一個帶有滑動徽標和兩個淡入淡出文本片段的動畫閃屏。當顯示的文本的佈局應該是這樣的：如何在CSS/LESS中爲這個序列創建動畫？

*------------------------* 
|      | 
|      | 
| [L] Lorem ipsum etc. | 
|      | 
|      | 
*------------------------*

該動畫應進步，像這樣：

標誌[L]開始在中心
標識幻燈片左騰出空間用於每個一段文字
文本1進出的視圖衰爲標誌的文本右側
2淡入和淡出的視圖中的相同位置
標誌滑回中心

這個問題我現在面臨的未來與元素層次結構和動畫屬性的正確組合，以把一切都在它應該是。

我最好的嘗試（下面）以0最大寬度和0不透明度的文本開始。我在第二個更寬的文本上設置最大寬度，將標誌推到一邊，然後等待適當的時間間隔，而第二個動畫使用不透明度顯示第一個文本。但是我仍然不能讓這兩個文本在徽標保持不變的情況下在同一個地方正確顯示。（假設屏幕上有空間，兩個文本都應該在徽標右側的空白處垂直和水平居中顯示，但第一個文本將爲一行，第二個文本將爲兩行。）

我是不知道這是否是正確的方法。爲了使設計響應，我想避免指定絕對尺寸，除了徽標和字體的大小。如果提供任何幫助，我正在使用Bootstrap。

Codepen example

HTML：

<div class="overlay"> 
    <div class="overlay--splash"></div> 
    <div> 
    <div id="overlay__one" class="h1 overlay--text">Short piece of text</div> 
    <div id="overlay__two" class="h1 overlay--text">Slightly longer text <br /> which will span two lines.</div> 
    </div> 
</div>

LESS：

.overlay { 
    z-index: 999; 
    position: absolute; 
    top: 0; 

    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 

    background: rgba(255,255,255,0.9); 
    padding: 100px; 

    .overlay--splash { 
    width: 200px; 
    min-width: 200px; 
    height: 200px; 
    margin: 1em; 
    display: inline-block; 
    align-self: center; 
    justify-content: center; 
    background-image: url("/images/app-icon.png"); 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-size: 200px; } 

    .overlay--text { 
    display: inline-block; 
    width: auto; 
    max-width: 0; 
    font-size: 64px; 
    font-weight: 900; 
    font-family: sans-serif; 
    color: @dark-blue; 
    opacity: 0; 
    } 

    #overlay__one { 

    .keyframes(fade-in-out; { 
     0% { opacity: 0; } 
     40% { opacity: 0; } 
     60% { opacity: 1; } 
     80% { opacity: 1; } 
     100% { opacity: 0; } 
     }); 

    .animation(fade-in-out 5s linear) 
    } 

    #overlay__two { 
    .keyframes(slide-fade; { 
     0% { opacity: 0; max-width: 0; } 
     10% { opacity: 0; max-width: 0; } 
     20% { opacity: 0; max-width: 1600px; } 
     50% { opacity: 0; max-width: 1600px; } 
     60% { opacity: 1; } 
     70% { opacity: 1; } 
     80% { opacity: 0; max-width: 1600px; } 
     90% { max-width: 0; } 
     }); 

    .animation(slide-fade 10s linear) 
    } 
}

來源

2017-03-08 Travis Christian

而不是試圖做所有的動畫直接在CSS它竟然是更容易堆積一切屏幕中心使用transform，然後使用jQuery爲動畫轉換：https://codepen.io/anon/pen/BWpQXg

var dX = $("#overlay__two").width()/2; 
$(".overlay--splash").animate({left: "-=" + (dX + 140)}); 
$("#overlay__one").delay(1000).fadeToggle(1000).fadeToggle(1000); 
$("#overlay__two").delay(3000).fadeToggle(1000).delay(1000).fadeToggle(1000); 
$(".overlay--splash").delay(6000).animate({left: "+=" + (dX + 140)});

來源

2017-03-08 23:36:42

如何在CSS/LESS中爲這個序列創建動畫？

回答

相關問題