Question

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

例如我有一个：

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

我需要更多的文字以一种“淡入淡出”的形式出现，而左侧和侧面的文字稍微向侧面移动，有点像这种效果：

我所做的（并且正在工作）在.more之前使用另一个带有类spacer的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

您需要使用关键帧。我做了一个快速测试：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>

Answer 2

您可以使用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>

CSS动画在H1

2 个答案: