这是我的代码: http://codepen.io/catch_up/pen/bpqexg?editors=1100
HTML
<div class='programming my-anim-parent'>
<span class='my-anim'>Hello!</span>
<span class='my-anim'>How</span></span>
<span class='my-anim'>Are</span></span>
<span class='my-anim'>You </span></span>
<span class='my-anim'>People.</span>
<span class='my-anim'>I</span>
<span class='my-anim'>Learn</span>
</div>
CSS
.programming {
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
}
.programming span:nth-of-type(1) {
animation-delay: 0.3s;
}
.programming span:nth-of-type(2) {
animation-delay: 0.6s;
}
.programming span:nth-of-type(3) {
animation-delay: 0.9s;
}
.programming span:nth-of-type(4) {
animation-delay: 1.2s;
}
.programming span:nth-of-type(5) {
animation-delay: 1.5s;
}
.programming span:nth-of-type(6) {
animation-delay: 1.8s;
}
.programming span:nth-of-type(7) {
animation-delay: 2.1s;
}
.my-anim-parent {
animation: L2RslideBounce 2.9s ease-in-out;
visibility: visible !important;
}
.my-anim {
animation: L2RAppear 2s, fadeIn 0.8s linear backwards;
visibility: visible !important;
}
/*FOR BOUNCING SENTENCE */
@keyframes L2RslideBounce {
0% {
transform: translate(-60%,-50%);
}
50%{
transform: translate(-40%,-50%);
}
100% {
transform: translate(-50%,-50%);
}
}
/*I think this is not working properly! Words are fading in all at once not from left to right. Can also be checked by putting long word.*/
/*EACH WORD SHOULD APPEAR LEFT TO RIGHT*/
@keyframes L2RAppear {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
/*FADING IN*/
@keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1;
}
}
这是两件事的重叠:
1)为每个单词从左向右淡入。
2)从整个句子的左侧反弹。
第二次发生正常,但是对于第一次,每个单词都会同时发生淡入淡出,而不是从左到右!如何解决这个问题。为它编写的代码但不起作用。如何解决这个问题?
答案 0 :(得分:1)
不是试图为每个单词组合一个复杂的序列,而是可以用元素覆盖文本并使用渐变来淡化它们。
我整理了一个片段,大致上我认为你正在寻找的东西:
#container {
position: relative;
left: 0;
transition: left 1s ease-in-out;
width: 300px;
}
#container:before {
content: 'hover over me!';
display: block;
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(to left,
yellow 0%,
yellow 50%, /* the difference between this one */
transparent 60%, /* and this one is half fade "softness" */
transparent 100%) no-repeat no-repeat;
background-size: 200%;
background-position: 100%;
transition: background-position 1s ease-out;
}
#container:hover {
/* This part can be replaced with the bounce animation */
left: 100px;
}
#container:hover:before {
content: '';
/*
Move the background position such that it hides the gradient entirely
since we scaled it up, this will bedouble the difference between the second and third gradient colours
*/
background-position: -20%;
}
<div id="container">
This is some text to fade in
</div>
请注意,这仅适用于一行文字,而且我没有包含反弹动画。