CSS 动画在 H1 中插入单词

Question

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

例如，我有一个：

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

我需要文本更多地以某种"淡入淡出"的方式出现，而左侧和侧面文本向两侧移动一点，就像这样的效果：

例

我所坚持（并且正在工作）是在 .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

更新：

对于平滑的动画，您可以使用百分比。从 和 表示 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>