I'm a completely new to animating text in CSS3, and I have two problems I can't quite figure out.
Problem 1:
I've been trying to float a regular word next to my animated text so it's all in one sentence. The animated word will be close to the end of the sentence and would take up the require space depending on the length of the word.
Janie is a lovely girl because she is (animated text) and cool.
Problem 2:
My second issue started when I added extra words for a total of 12 animated words. This caused a looping issue with words appearing on top of each other I'm not sure what to change in terms of the keyframes to make the words all loop how they're supposed to.
Any help or push in the right direction will be extremely helpful at this point. Here's the fiddle
Thanks in advanced!
HTML:
<section class="wrapper">
<h2 class="sentence">Janie is a lovely girl because she is
<div class="slidingVertical">
<span>amazing</span>
<span>beautiful</span>
<span>cute</span>
<span>honest</span>
<span>cool</span>
<span>brave</span>
<span>wild</span>
<span>interesting</span>
<span>local</span>
<span>sexy</span>
<span>intelligent</span>
<span>exotic</span>
</div>
<p>
and cool.
</p>
</h2>
</section>
CSS:
/*Heading1*/
h1{
color: #fff;
font-size: 44px;
margin-top: 40px;
text-align: center;
}
/*Sentence*/
.sentence{
color: #222;
font-size: 30px;
text-align: left;
}
/*Wrapper*/
.wrapper{
font-family: 'Raleway', sans-serif;
margin: 100px auto;
padding: 40px 40px;
position: relative;
width: 70%;
}
/*Vertical Sliding*/
.slidingVertical{
display: inline;
text-indent: 8px;
}
.slidingVertical span{
animation: topToBottom 10.5s linear infinite 0s;
-ms-animation: topToBottom 10.5s linear infinite 0s;
-webkit-animation: topToBottom 10.5s linear infinite 0s;
color: #000;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
animation-delay: 12s;
-ms-animation-delay: 12s;
-webkit-animation-delay: 12s;
}
/*topToBottom Animation*/
#-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Horizontal Sliding*/
.slidingHorizontal{
display: inline;
text-indent: 8px;
}
.slidingHorizontal span{
animation: leftToRight 12.5s linear infinite 0s;
-ms-animation: leftToRight 12.5s linear infinite 0s;
-webkit-animation: leftToRight 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingHorizontal span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingHorizontal span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingHorizontal span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingHorizontal span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*leftToRight Animation*/
#-moz-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateX(-50px); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateX(-50px); }
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateX(-50px); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*FadeIn*/
.fadeIn{
display: inline;
text-indent: 8px;
}
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.fadeIn span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*FadeIn Animation*/
#-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Vertical Flip*/
.verticalFlip{
display: inline;
text-indent: 8px;
}
.verticalFlip span{
animation: vertical 12.5s linear infinite 0s;
-ms-animation: vertical 12.5s linear infinite 0s;
-webkit-animation: vertical 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateX(180deg); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
#-webkit-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotateX(180deg); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes vertical{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotateX(180deg); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Horizontal Flip*/
.horizontalFlip{
display: inline;
text-indent: 8px;
}
.horizontalFlip span{
animation: horizontal 12.5s linear infinite 0s;
-ms-animation: horizontal 12.5s linear infinite 0s;
-webkit-animation: horizontal 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.horizontalFlip span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.horizontalFlip span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.horizontalFlip span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.horizontalFlip span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Horizontal Flip Animation*/
#-moz-keyframes horizontal{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateY(180deg); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
#-webkit-keyframes horizontal{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotateY(180deg); }
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes horizontal{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotateY(180deg); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*AntiClockWise Effect*/
.antiClock{
display: inline;
text-indent: 8px;
}
.antiClock span{
animation: anti 12.5s linear infinite 0s;
-ms-animation: anti 12.5s linear infinite 0s;
-webkit-animation: anti 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.antiClock span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.antiClock span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.antiClock span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.antiClock span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*AntiClockWise Effect Animation*/
#-moz-keyframes anti{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateX(180deg); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
#-webkit-keyframes anti{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotate(180deg); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes anti{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(180deg); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*ClockWise Effect*/
.clockWise{
display: inline;
text-indent: 8px;
}
.clockWise span{
animation: clock 12.5s linear infinite 0s;
-ms-animation: clock 12.5s linear infinite 0s;
-webkit-animation: clock 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.clockWise span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.clockWise span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.clockWise span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.clockWise span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
.clockWise span:nth-child(6){
animation-delay: 11s;
-ms-animation-delay: 11s;
-webkit-animation-delay: 11s;
}
/*ClockWise Effect Animation*/
#-moz-keyframes clock{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotate(-180deg); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
#-webkit-keyframes clock{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotate(-180deg); }
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes clock{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(-180deg); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Pop Effect*/
.popEffect{
display: inline;
text-indent: 8px;
}
.popEffect span{
animation: pop 12.5s linear infinite 0s;
-ms-animation: pop 12.5s linear infinite 0s;
-webkit-animation: pop 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.popEffect span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.popEffect span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.popEffect span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.popEffect span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Pop Effect Animation*/
#-moz-keyframes pop{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
#-webkit-keyframes pop{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes pop{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Push Effect*/
.pushEffect{
display: inline;
text-indent: 8px;
}
.pushEffect span{
animation: push 12.5s linear infinite 0s;
-ms-animation: push 12.5s linear infinite 0s;
-webkit-animation: push 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.pushEffect span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.pushEffect span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.pushEffect span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.pushEffect span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Push Effect Animation*/
#-moz-keyframes push{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
#-webkit-keyframes push{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform:rotate(0deg) scale(2) skew(0deg) translate(0px);}
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes push{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
/*Footer*/
h3{
color: #fff;
font-size: 30px;
margin-top: 20px;
text-align: center;
}
You need to set all the main elements to be inline.
The exception would be the span,that needs to be block, to be able to make the container autoadjust.
And the animations need to be overlapping in time.
.sentence {
display: inline-block;
verflow: hidden;
height: 2em;
vertical-align: top;
}
.sentence p {
display: inline-block;
}
.slidingVertical {
display: inline-block;
vertical-align: text-top;
}
.slidingVertical span {
display: block;
height: 30px;
margin-bottom: -30px;
overflow: hidden;
}
.slidingVertical span {
animation: elements 10s infinite linear;
}
.slidingVertical span:nth-child(1) {
animation-delay: -1s;
}
.slidingVertical span:nth-child(2) {
animation-delay: -2s;
}
.slidingVertical span:nth-child(3) {
animation-delay: -3s;
}
.slidingVertical span:nth-child(4) {
animation-delay: -4s;
}
.slidingVertical span:nth-child(5) {
animation-delay: -5s;
}
.slidingVertical span:nth-child(6) {
animation-delay: -6s;
}
.slidingVertical span:nth-child(7) {
animation-delay: -7s;
}
.slidingVertical span:nth-child(8) {
animation-delay: -8s;
}
.slidingVertical span:nth-child(9) {
animation-delay: -9s;
}
.slidingVertical span:nth-child(10) {
animation-delay: -10s;
}
#keyframes elements {
0% {
opacity: 0;
max-width: 10px;
}
5%, 10% {
opacity: 1;
max-width: 400px;
}
15%, 100% {
opacity: 0;
max-width: 10px;
}
}
<section class="wrapper">
<h2 class="sentence">Janie is a
<div class="slidingVertical">
<span>cute</span>
<span>wild</span>
<span>amazingly cute</span>
<span>very beatiful and amazingly cute</span>
<span>beautiful</span>
<span>honest</span>
<span>cool</span>
<span>brave</span>
<span>interesting</span>
<span>local</span>
</div>
<p>girl</p>
</h2>
</section>
Related
I am creating an animation that rotate text that's based on this website: https://tympanus.net/Tutorials/CSS3RotatingWords/
I would like to make the text stay longer and support unknow number of sentences:
<div style="height:25px;margin-bottom:5px;">
<div class="rw-words rw-words-1">
<span style="-webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; ">This is sentence one</span>
<span style="-webkit-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; ">This is sentence two</span>
<span style="-webkit-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; ">This is sentence three</span>
</div>
</div>
<style>
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 1;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
Above codes work well but I would like the text to stay longer before rotating to the next. I've tried to change the keyframes % values but that only messes up the animation. What do I need to do to say keep each sentence up for 10 seconds before next? Thanks!
I cannot figure out how to add a static word after this CSS text animation. Can someone please explain how to add a static word after this text animation? I would like to add the word 'Teams' after the animation. when I try to add the word it overlaps with the spans because it was positioned absolute.
I couldn't figure out how to do it.
<text-block class="sentence">For Modern
<div class="verticalFlip">
<span>Engineering</span>
<span>Manufacturing</span>
<span>Quality</span>
<span>Service</span>
</div>
<text-block/>
<Style>
.sentence {
text-align: left;
}
.verticalFlip {
display: inline;
text-indent: 3px;
}
.verticalFlip span {
animation: vertical 10s linear infinite 0s;
-ms-animation: vertical 10s linear infinite 0s;
-webkit-animation: vertical 10s linear infinite 0s;
opacity: 0;
position: absolute;
overflow: hidden;
height : 40px
}
.verticalFlip span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4) {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateX(180deg); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
#-webkit-keyframes vertical {
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotateX(180deg); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes vertical {
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotateX(180deg); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
I used a little trick to just use css without javascript.
.sentence {
text-align: left;
}
.verticalFlip {
display: inline;
font-size: 0;
}
.verticalFlip>span {
position: relative;
display: inline-block;
width: 0;
color: transparent;
font-size: 1rem;
animation: fakeWidth 10s linear infinite 0s;
-ms-animation: fakeWidth 10s linear infinite 0s;
-webkit-animation: fakeWidth 10s linear infinite 0s;
}
.verticalFlip>span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip>span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip>span:nth-child(4) {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip>div {
display: inline-block;
font-size: 1rem;
text-indent: 5px;
}
.verticalFlip>span>span {
position: absolute;
left: 0;
top: 0;
height: 40px;
color: black;
opacity: 0;
z-index: 1;
animation: vertical 10s linear infinite 0s;
-ms-animation: vertical 10s linear infinite 0s;
-webkit-animation: vertical 10s linear infinite 0s;
}
.verticalFlip>span:nth-child(2)>span {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip>span:nth-child(3)>span {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip>span:nth-child(4)>span {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fakeWidth {
0% {
width: 0;
}
5% {
width: auto;
}
25% {
width: auto;
}
30% {
width: 0;
}
100% {
width: 0;
}
}
<text-block class="sentence">For Modern
<div class="verticalFlip">
<span>Engineering<span>Engineering</span></span>
<span>Manufacturing<span>Manufacturing</span></span>
<span>Quality<span>Quality</span></span>
<span>Service<span>Service</span></span>
<div>Teams</div>
</div>
</text-block>
just wondering if there is a css only solution / trick to avoid the absolute element overlapping the content below.
I already learned that position absolute takes out the element from the layout so its not possible to give the parent element the height of its absolute child.
Maybe you guys know a workaround.
thanks for your time and thoughts
/*Sentence*/
.sentence{
color: #222;
font-size: 50px;
}
/*FadeIn*/
.fadeIn{
display: inline;
text-indent: 8px;
}
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.fadeIn span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*FadeIn Animation*/
#-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<body>
<h2 class="sentence">
<div class="fadeIn">
<span>Handsome.</span>
<span>Clean.</span>
<span>Elegant.</span>
<span>Magnificent.</span>
<span>Adorable.</span>
</div>
</h2>
<h2>LOrem iaoeg egaa eg aeg aeg aegoaegaokeg aeogk aeogkae gok </h2>
</body>
As soon as I add a letter it works. So maybe adding a pseudo element is a solution?
/*Sentence*/
.sentence{
color: #222;
font-size: 50px;
}
/*FadeIn*/
.fadeIn{
display: inline;
text-indent: 8px;
}
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.fadeIn span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*FadeIn Animation*/
#-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<body>
<h2 class="sentence">A
<div class="fadeIn">
<span>Handsome.</span>
<span>Clean.</span>
<span>Elegant.</span>
<span>Magnificent.</span>
<span>Adorable.</span>
</div>
</h2>
<h2>LOrem iaoeg egaa eg aeg aeg aegoaegaokeg aeogk aeogkae gok </h2>
</body>
The problem is, .fadeIn element now has no non-absolute children, so basically it has a height of 0 because absolute elements don't get calculated in the height of their parent.
Thus, the only thing you need to do is giving a proper height to .fadeIn element.
There are many ways you can handle that, but I made this one for you. I'm going to make :first-child of your spans inside of .fadeIn element as position: static ( default position value ) to let its parent know how much height should it take.
The other way is to set height: 50px ( for example ) for you .fadeIn element to let that element know how much should it take as height.
The other way ( as you already mentioned ) is to make another child ( in your example, an A ) to let it know the height value.
and many more ways.
But I've taken the first solution ( there were some other changes according to that context to make sure everything's working properly ). Look at the following code:
/*Sentence*/
.sentence{
color: #222;
font-size: 50px;
}
.fadeIn { position: relative; }
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
top: 0;
overflow: hidden;
position: absolute;
}
.fadeIn span:first-child { position: static; display: block }
.fadeIn span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*FadeIn Animation*/
#-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<body>
<h2 class="sentence">
<div class="fadeIn">
<span>Handsome.</span>
<span>Clean.</span>
<span>Elegant.</span>
<span>Magnificent.</span>
<span>Adorable.</span>
</div>
</h2>
<h2>LOrem iaoeg egaa eg aeg aeg aegoaegaokeg aeogk aeogkae gok </h2>
</body>
Don't make all the elements to be absolute. Keep one relative (or static) so it allocate the needed space:
/*Sentence*/
.sentence {
color: #222;
font-size: 50px;
}
/*FadeIn*/
.fadeIn {
display: inline;
text-indent: 8px;
position: relative;/*added*/
}
.fadeIn span {
animation: fadeEffect 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
left: 0; /*added*/
top: 0; /*added*/
}
/*added this*/
.fadeIn span:first-child {
position: relative;
}
/**/
.fadeIn span:nth-child(2) {
animation-delay: 2.5s;
}
.fadeIn span:nth-child(3) {
animation-delay: 5s;
}
.fadeIn span:nth-child(4) {
animation-delay: 7.5s;
}
.fadeIn span:nth-child(5) {
animation-delay: 10s;
}
/*FadeIn Animation*/
#keyframes fadeEffect {
0% {
opacity: 0;
}
5% {
opacity: 0;
transform: translateY(0px);
}
10% {
opacity: 1;
transform: translateY(0px);
}
25% {
opacity: 1;
transform: translateY(0px);
}
30% {
opacity: 0;
transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<h2 class="sentence">
<div class="fadeIn">
<span>Handsome.</span>
<span>Clean.</span>
<span>Elegant.</span>
<span>Magnificent.</span>
<span>Adorable.</span>
</div>
</h2>
<h2>LOrem iaoeg egaa eg aeg aeg aegoaegaokeg aeogk aeogkae gok </h2>
I'm using a simple top-to-bottom vertical css text scroll animation and want it to stop on the last keyframe word (everyone). I've added the 'forwards' animation-fill-mode but nothing appears after it plays through once. Code: https://codepen.io/oconnellsail/pen/MZmgbo
/*Vertical Sliding*/
.slidingVertical{
display: inherit;
}
.slidingVertical span{
animation: topToBottom 7.5s linear 0s 1 forwards;
-ms-animation: topToBottom 7.5s linear 0s 1 forwards;
-webkit-animation: topToBottom 7.5s linear 0s 1 forwards;
color: #13b2cf;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
/*topToBottom Animation*/
#-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<h1 class="sentence">
<div class="slidingVertical">
<span>Your struggling student</span>
<span>Your child</span>
<span>Everyone</span>
</div>
<br>can be a math person.</h1>
You can add one more animation topToMiddle.
#-webkit-keyframes topToMiddle{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
100% { opacity: 1; }
}
and add it to .slidingVertical span:nth-child(3){.... .... animation-name: topToMiddle;}
/*Vertical Sliding*/
.slidingVertical{
display: inherit;
}
.slidingVertical span{
animation: topToBottom 7.5s linear 0s 1 forwards;
-ms-animation: topToBottom 7.5s linear 0s 1 forwards;
-webkit-animation: topToBottom 7.5s linear 0s 1 forwards;
color: #13b2cf;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-name: topToMiddle;
}
#-webkit-keyframes topToMiddle{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
100% { opacity: 1; }
}
/*topToBottom Animation*/
#-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<h1 class="sentence">
<div class="slidingVertical">
<span>Your struggling student</span>
<span>Your child</span>
<span>Everyone</span>
</div>
<br>can be a math person.</h1>
Test it here
Maybe you need create a animation to last span like that: https://codepen.io/anon/pen/KbBpqM
and use:
animation-iteration-count: 1
I've been trying to implement this codepen: https://codepen.io/paulrogers/pen/KWORqz
Specifically this piece:
/*Horizontal Sliding*/
.slidingHorizontal{
display: inline;
text-indent: 8px;
}
.slidingHorizontal span{
animation: leftToRight 12.5s linear infinite 0s;
-ms-animation: leftToRight 12.5s linear infinite 0s;
-webkit-animation: leftToRight 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingHorizontal span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingHorizontal span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingHorizontal span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingHorizontal span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*leftToRight Animation*/
#-moz-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateX(-50px); }
10% { opacity: 1; -moz-transform: translateX(0px); }
25% { opacity: 1; -moz-transform: translateX(0px); }
30% { opacity: 0; -moz-transform: translateX(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateX(-50px); }
10% { opacity: 1; -webkit-transform: translateX(0px); }
25% { opacity: 1; -webkit-transform: translateX(0px); }
30% { opacity: 0; -webkit-transform: translateX(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateX(-50px); }
10% { opacity: 1; -ms-transform: translateX(0px); }
25% { opacity: 1; -ms-transform: translateX(0px); }
30% { opacity: 0; -ms-transform: translateX(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
I'm trying to integrate the css into my main.scss file -- I'm aware that the scss file doesn't recognize keyframes -- but I'm having trouble converting.
Any help would be appreciated! I'm very new to scss so any extra explanations would be awesome!