CSS 动画在 H1 中插入单词

Question

您好，我有一种情况，我需要在段落内一段时间后显示带有过渡的单词

例如我有一个：

<h2>Click here to find <span class="more">more</span> information </h2>

我需要更多的文字以一种“淡入淡出”的方式出现，而左侧和侧面的文字会稍微向两侧移动，类似于这种效果：

example

我坚持（并且正在工作）是在 .more 之前使用另一个带有类间隔的 span 标签

<h2>Click here to find <span class="spacer"></span><span class="more">more</span> information </h2>

这是绝对定位并使用从宽度 0 到宽度 70px 的过渡 并且在除 safari 之外的所有浏览器中看起来都很好，因为分隔符始终可见

这是我的css代码：

h2.sides-styled { left:0; margin: 0 auto; opacity:0; overflow: hidden; padding: 4px 0; position: absolute; right: 0; width: 774px; z-index: 1000; }

还有跨度：

span.more { color:red;  font-style: italic;  left:365px; opacity:0; position: absolute; transition: visibility 2s; transition-delay: 3.3s; visibility: hidden; }

span.more.visible { opacity: 1; visibility: visible; }

span.spacer{ width:0; background: blue; -webkit-transition: width 2s ease; -moz-transition: width 0.3s ease; -o-transition: width 0.3s ease; -ms-transition: width 0.3s; transition: width 0.3s;  transition-delay: 3.1s; -webkit-transition-delay: 3.1s; -moz-transition-delay: 3.1s; -o-transition-delay: 3.1s; -ms-transition-delay: 3.1s; }

在 Javascript 中添加 .visible 类会触发动画

我只需要使用 css 来实现这一点

Answer 1

您可以使用 CSS3 过渡来实现效果：

function toggleVisible() {
var heading = document.getElementsByTagName('h2')[0];
heading.classList.toggle('visible');
}

var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', toggleVisible, false);

h2 {
font-size: 36px;
text-align: center;
}

h2 span {
display: inline-block;
}

h2 span:nth-of-type(1) {
transform: translateX(42px);
transition: transform 2s ease-in-out;
}

h2 span:nth-of-type(2) {
opacity: 0;
transition: opacity 2s ease-in-out 1s;
}

h2 span:nth-of-type(3) {
transform: translateX(-42px);
transition: transform 2s ease-in-out;
}

h2.visible span:nth-of-type(1) {
transform: translateX(0);
}

h2.visible span:nth-of-type(2) {
opacity: 1;
}

h2.visible span:nth-of-type(3) {
transform: translateX(0);
}

<h2><span>Click here to find</span> <span>more</span> <span>information</span></h2>

<button type="button">Toggle visible</button>

Answer 2

您需要为此使用关键帧。我做了一个快速测试：http://jsbin.com/pubicabiku/1。 您需要调整持续时间和位置，但您可以了解要点。

关于关键帧的更多信息：http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

更新：

对于流畅的动画，您可以使用百分比。 from 和 to 分别代表 0 和 100：

/* sleft */
@-webkit-keyframes sleft {
    0% {left: 50px; }
    60% {left: 0px;}
  100% {left: 50px;} // initial state
}

重复动画 X 次：

animation-iterantion-count: X;
-webkit-animation-iterantion-count: X;

编辑：我贴出代码，以防万一：

CSS

#swap {
  position:absolute;
  color:chocolate;
  -webkit-animation: swap 2s infinite;
   animation: swap 2s infinite;
}

/* swap */
@-webkit-keyframes swap {
    from {left: 150px; opacity:0;}
    to {left: 190px; opacity:1;}
}

@keyframes swap {
    from {left: 150px; opacity:0;}
    to {left: 190px; opacity:1;}
}

#sleft {
  position:absolute;
  -webkit-animation: sleft 2.5s infinite;
   animation: sleft 2.5s infinite;
}

/* sleft */
@-webkit-keyframes sleft {
    from {left: 50px; }
    to {left: 0px;}
}

@keyframes sleft {
    from {left: 50px;}
    to {left: 0px;}
}

#sright {
  position:absolute;
  -webkit-animation: sright 3s infinite;
   animation: sright 3s infinite;
}

/* sright */
@-webkit-keyframes sright {
    from {left: 200px; }
    to {left: 270px;}
}

@keyframes sright {
    from {left: 200px; }
    to {left: 270px;}
}

HTML

<p id="sentence">
    <span id="sleft">We provide</span>
    <span id="swap">code</span> 
    <span id="sright">for your business.</span>
  </p>