I am using CSS keyframes to animate two separate text.
The problem which I am facing is that the text of first span element ("first text") on 100% animation completion appears suddenly instead of second span element text fliping after the completion of "first text".
.c--anim-btn {
height: 40px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #ffffff;
}
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c-anim-btn {
animation: rotateWord 3s linear infinite 0s;
}
.c--anim-btn span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#keyframes rotateWord {
0% {
margin-bottom: 0rem;
}
25% {
margin-top: 0rem;
}
40% {
margin-top: -4rem;
}
100% {
margin-top: -4rem;
}
}
<div class="c--anim-btn">
<span class="c-anim-btn">First Text</span>
<span>Second Text</span>
</div>
jsFiddle
Try to change the css property to the following, in order to keep the final state of the animation:
.c-anim-btn{
animation: rotateWord 3s forwards;
-webkit-animation: rotateWord 3.0s forwards
}
I have changed a little your keyframes, may be this is what you want
.c--anim-btn {
height: 40px;
font: normal normal 700 1em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;
background-color: #ffffff;
}
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c-anim-btn{
animation: rotateWord 3s linear infinite 0s;
}
.c--anim-btn span:nth-child(2){
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#keyframes rotateWord {
0%, 25% {
margin-top: 0rem;
}
40%, 75% {
margin-top: -4rem;
}
100% {
margin-top: 0rem;
}
}
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
Related
This is auto fade out after hover css animation
I'm trying to show a notification on video play button. The button click actually clicked for video play. I want to show a div with its content with the play icon. However, I would like to fade out the play icon, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt. Please inform me if better solution here.
Here is the live Demo
body {
font-size: 50%;
font-style: Arial;
}
.animation-box {
width: 75%;
height: 27.5rem;
background-color: blue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.animation-container {
width: 1000rem;
height: 30rem;
}
.first-text {
font-size: 4rem;
position: absolute;
left: 2.5rem;
top: 5rem;
color: white;
-webkit-animation: fadeOut 2s forwards;
animation: fadeOut 2s forwards;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.first-text:hover {
-webkit-animation: fadeIn 0s forwards;
animation: fadeIn 0s forwards;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#-webkit-keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
<section class="animation-box">
<h1 class="first-text">This is auto fade out after hover </h1>
</section>
You can achieve this with just transition :
body {
font-size: 50%;
font-style: Arial;
}
.animation-box {
width: 75%;
height: 27.5rem;
background-color: blue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
h1{
opacity:0;
transition: opacity 250ms 5s ease;
}
.animation-box:hover h1{
opacity:1;
transition-delay: 250ms;
}
<section class="animation-box">
<h1 class="first-text">This is auto fade ou1t after hover </h1>
</section>
.Class {
transition: all 0.5s;
color: #ff0;
margin: 50px;
font-size: 28px;
cursor: pointer;
}
.Class:hover {
color: #00f;
}
<p class="Class"> This is me </p>
Use transition:0.5s ease with opacity:0
<section class="animation-box">
<h1 class="first-text">This is auto fade ou1t after hover </h1>
</section>
.animation-box{
transition: 0.5s ease;
}
.animation-box:hover{
opacity:0;
transition: 0.5s ease;
}
I am trying to typewrite 2 lines in CSS. My problem is that both lines are being written at the same time. I tried to use the animation-delay property but it does not work properly.
How can I type out the first line then type out the second line?
/*-----------------------LINE 1-----------------------*/
.line-1{
font-family: monospace;
position: relative;
top: 30%;
left: 15%;
width: 24em;
margin: 0 auto;
font-size: 250%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
}
#keyframes typewriter{
from{width: 0;}
to{width: 9.5em;}
}
#keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
/*-----------------------LINE 2-----------------------*/
/* Animation */
.anim-typewriter2{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
animation-delay: 4s;
}
#keyframes typewriter{
from{width: 0;}
to{width: 15em;}
}
#keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
<p class="line-1 anim-typewriter">Hi, I'm Mohanad,</p>
<p class="line-2 anim-typewriter2">I do cool computer stuff.</p>
/*-----------------------LINE 1-----------------------*/
.line-1, .line-2 {
font-family: monospace;
position: relative;
top: 30%;
left: 15%;
width: 24em;
margin: 0 auto;
font-size: 250%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter {
animation: typewriter1 4s steps(44) 1s 1 normal both,
blinkTextCursor1 500ms steps(44) infinite normal;
}
#keyframes typewriter1 {
from {
width: 0;
}
to{
width: 9.5em;
}
}
#keyframes blinkTextCursor1 {
from {
border-right-color: rgba(255,255,255,.75);
}
to {
border-right-color: transparent;
}
}
/*-----------------------LINE 2-----------------------*/
/* Animation */
.anim-typewriter2{
animation: typewriter2 4s steps(44) 1s 1 normal both,
blinkTextCursor2 500ms steps(44) infinite normal;
animation-delay: 5s;
}
#keyframes typewriter2 {
from {
width: 0;
}
to {
width: 15em;
}
}
#keyframes blinkTextCursor2 {
from {
border-right-color: rgba(255,255,255,.75);
}
to {
border-right-color: transparent;
}
}
<p class="line-1 anim-typewriter">Hi, I'm Mohanad,</p>
<p class="line-2 anim-typewriter2">I do cool computer stuff.</p>
I guess this is what you're looking for. My guess is that you defined 2 animatations with the same name and therefor you overwrite them. Also you needed to specify properties from .line-1 to .line-2
I'm having a hard time making this preloader animation in CSS.
This is what I'm trying to make.
What am I doing wrong?
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
html, body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
Use step-end:
animation: pulse .8s infinite step-end;
body{
padding-top: 40px; /* for demonstration purpose */
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite step-end;
animation-delay: .2s;
}
.m {
animation: pulse 2s infinite step-end;
animation-delay: .4s;
}
.r {
animation: pulse 2s infinite step-end;
animation-delay: .6s;
}
#keyframes pulse {
0% { transform: scale( 1 ); }
50% { transform: scale( 2 ); }
100% { transform: scale( 1 ); }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
JSFiddle
Now just adjust the animation duration and delay time to make it more like in the OP.
Update: use transform: scale() to make the circle expand from its centar - reference
I have extra frames to the animation. Check below answer.
html,
body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.5em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite linear;
}
.m {
animation: pulse 2s infinite linear;
animation-delay: .3s;
}
.r {
animation: pulse 2s infinite linear;
animation-delay: .6s;
}
#keyframes pulse {
10% {
transform: scale(1);
}
20% {
transform: scale(1);
}
30% {
transform: scale(1.7);
}
50% {
transform: scale(1.7);
}
70% {
transform: scale(1.7);
}
80% {
transform: scale(1);
}
90% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
I have an ul. With javascript I add the li's to it. I need the added li with background-color #E4F3D6 then 10 seconds later change to #DDD as final color.
I know this is possible with animation and transition-delay but I don't figure out how.
I wrote this but doesn't work properly:
#-webkit-keyframes change-color {
0% {
background-color: #E4F3D6;
/*-webkit-transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
#-moz-keyframes change-color {
0% {
background-color: #E4F3D6;
/*-moz-transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
#keyframes change-color {
0% {
background-color: #E4F3D6;
/*transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease;
-moz-animation: change-color 2s ease;
animation: change-color 2s ease;
}
Here a demo: https://jsfiddle.net/junihh/a657pd6q/4/
Anyone help me, please.
Set the transition-delay property in the CSS for the element itself:
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease 5s forwards;
-moz-animation: change-color 2s ease 5s forwards;
animation: change-color 2s ease 5s forwards;
}
The above uses the shorthand alternative for the animation property:
animation: <animation-name> <animation-duration> <animation-type> <animation-duration> <animation-fill-mode>
The animation-delay property does precisely what its name suggests, it delays the start of the animation by the value specified (here 5s, five seconds); the animation-fill-mode property causes the final values of the animation to persist once the animation has completed:
document.getElementById('add').addEventListener('click', function() {
var li = document.createElement('li');
li.innerHTML = '<div class="test"></div>';
document.getElementById('container').appendChild(li);
}, false);
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
#container {
width: 200px;
margin: 20px auto 0;
padding: 15px;
background-color: #FFF;
border: solid 1px #DDD;
}
#container li {
background-color: #DDD;
margin-bottom: 4px;
}
#container li:last-child {
margin-bottom: 0;
}
.button-box {
margin: 20px auto 0;
width: 100px;
}
#add {
width: 100%;
padding: 10px 0;
background-color: #666;
cursor: pointer;
font-size: 14px;
color: #FFF;
}
#add:active {
background-color: #333;
}
#-webkit-keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
#-moz-keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
#keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease 5s forwards;
-moz-animation: change-color 2s ease 5s forwards;
animation: change-color 2s ease 5s forwards;
}
<ul id="container">
<!-- li's -->
</ul>
<div class="button-box">
<button type="button" id="add">Add row</button>
</div>
JS Fiddle demo.
Note that, in the demo, I've used a final colour of #f90 instead of #ddd simply to make the animation more obvious (the difference between the start and end colours, otherwise, are easy to miss).
I'm having issues in Chrome browser getting my animations to work correctly. Upon page load the first span in rw-words-1 is always off in its positioning for some reason. On the website when the page loads, it is supposed to read like...
Building "some text 1"
designed to "some word 1"
and then the words i've placed in quotes should fade out and the new words pop in like...
Building "some text 2"
designed to "some word 2"
etc, etc based on the html file below. The problem is the 2nd and 3rd span pop in the correct positioning, but the 1st span is always jumbled & overlapping the "designed to" text for some reason. It works fine however in Firefox / Safari. Any help would be much appreciated.
FRONT-END HTML
<div class="slogan">
<h1 class="rw-sentence">
<span>Building</span>
<div class="rw-words rw-words-1">
<span>some text 1...</span>
<span>some text 2...</span>
<span>some text 3...</span>
</div>
<br clear="all">
<span>designed to</span>
<div class="rw-words rw-words-2">
<span>some word 1</span>
<span>some word 2</span>
<span>some word 3</span>
</div>
</h1>
<p>Some sub-slogan here</p>
</div>
CSS:
/* ------ CSS ANIMATIONS ------- */
.rw-wrapper {
width: 90%;
padding: 10px;
}
.rw-sentence{
text-align: left;
position: relative;
}
.rw-sentence span {
white-space: nowrap;
}
.rw-words {
display: inline;
}
.rw-words span{
position: absolute;
opacity: 0;
width: 100%;
/* overflow: hidden; */
font-weight: bold;
}
.rw-words.rw-words-1 span {
margin-left: 0px;
}
/* -- WEIRD FIREFOX MARGIN HACK --*/
#-moz-document url-prefix() {
.rw-words.rw-words-1 span {
margin-left: 10px;
}
}
.rw-words.rw-words-2 span {
margin-left: 10px;
}
.rw-words-1 span{
animation: rotateWordsSecond 18s linear infinite 0s;
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-moz-keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-webkit-keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
#-moz-keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
#-webkit-keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
Well...I just changed some code around & added some margins/floats & it now works in all browsers. Still not sure why chrome treated the transitions/code from my original question differently though which is pretty frustrating. If anybody knows, i'd still love to know as I'm trying to get better at design that's consistent across all browsers. thx,
.rw-words {
display: inline;
float: left;
}
.rw-words span{
position: absolute;
opacity: 0;
width: 100%;
/* overflow: hidden; */
font-weight: bold;
}
.rw-words.rw-words-1 span {
margin-left: 165px;
font-weight: 480;
}
/* -- I REMOVED THE FIREFOX MARGIN HACK --*/
.rw-words.rw-words-2 span {
margin-left: 234px;
font-weight: 480;
}