如何在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中为这个序列创建动画？

回答

相关问题