logo标签列表

在另一个动画完成后开始动画 (CSS/HTML)

htmlcssanimation
13

我想在第一个动画完成后开始另一个动画，但我不知道该怎么做。我希望文字在第一个动画之后的2秒钟内上移至页面顶部。以下是我的代码。谢谢 :)

CSS:

    @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300');

body {
    background-image: url("img/new_y_c_grad.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.entryText {
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    text-align: center;
    padding: 260px 0;
    font-size: 50px;

}

.animate {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.3, 0.25, 0.9);
}

.delay-150 {
    animation-delay: 150ms;
}

@keyframes anim-fade-in-up {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform: none
    }
}


.anim-fade-in-up {
    animation-name: anim-fade-in-up
}

并且 HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Blank App</title>
    </head>
    <body>
        <script type="text/javascript" src="cordova.js"></script>
        <link rel="stylesheet" type="text/css" href="main.css">

        <h1 class="entryText animate anim-fade-in-up delay-150">Animation here</h1>

    </body>
</html>
2个回答
13
请看这支笔： http://codepen.io/TunderScripts/pen/ggOgWz CSS部分：
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation: example 4s linear, 4s dude 4s linear;
}

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: blue;
    left: 0px;
    top: 200px;
  }
  50% {
    background-color: green;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}

@keyframes dude {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  100% {
    background-color: cyan;
    left: 0px;
    top: 200px;
  }
}

你可以创建任意数量的动画，使用延迟甚至重叠来堆叠它们。阅读此文以更深入地了解这些参数的含义：https://css-tricks.com/almanac/properties/a/animation/。祝你有愉快的一天！保持代码整洁！
4

您可以使用相同的关键帧来执行两个动画，像这样fiddle

.animate {
   animation-duration: 4s;
   animation-fill-mode: both; 
   animation-timing-function: cubic-bezier(0.2, 0.3, 0.25, 0.9);
}

@keyframes anim-fade-in-up {
0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0)
}
25% {
    opacity: 0.5;
}
50% {
    opacity: 1;
    transform: none;
    padding-top:260px;   
}
100% {
    opacity: 1;
    transform: none;
    padding-top:20px;
}

}

增加动画持续时间

非常完美地工作。非常感谢你。 - user5513577
1
你可以在同一元素上使用动画列表，但这并不是最佳答案。 - Dinca Adrian
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接