I am making a simple animation in Codepen - the poem fades in, then the word (that is also the button) fades in. The user clicks on the word and it changes to the next part of the poem.
My problem is that the poem and single word with flash before the fade out starts.
I have tried ALL the tricks I can find, adding:
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
and none of them have worked.
Link to the codepen: https://codepen.io/zaenaria/pen/xWVLmP
$(".btnQuestion").hide();
var answer = document.getElementById('answerBtn');
answer.style.cursor = 'pointer';
answer.onclick = function() {
$(".poem").addClass("animationComplete");
$(".btnAnswer").addClass("animationComplete");
$(".answer").addClass("animationFade");
$(".btnQuestion").show();
$(".btnQuestion").addClass("animationFade");
};
var question = document.getElementById('questionBtn');
question.style.cursor = "pointer";
question.onclick = function() {
$(".answer").addClass("animationComplete");
$(".btnQuestion").addClass("animationComplete");
$(".question").addClass("animationFade");
$(".rip").addClass("animationRIP");
};
body {
background: url("http://res.cloudinary.com/zaenaria/image/upload/v1521062114/paper_texture.jpg");
background-repeat: no-repeat;
background-position: cover;
color: white;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
}
.poem {
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
height: 300px;
width: 900px;
position: absolute;
margin: -150px 0 0 -450px;
opacity: 0;
animation-name: fade;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.answer {
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
height: 160px;
width: 900px;
position: absolute;
margin: -80px 0 0 -450px;
opacity: 0;
}
.question {
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
height: 80px;
width: 400px;
position: absolute;
margin: -40px 0 0 -200px;
opacity: 0;
}
.rip {
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
height: 140px;
width: 400px;
position: absolute;
margin: 25px 0 0 -200px;
opacity: 0;
}
.btnAnswer{
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
height: 80px;
width: 180px;
position: absoulte;
margin: 200px 0 0 -100px;
opacity: 0;
animation-name: fade;
animation-delay: 2.0s;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.btnAnswer:hover {
background: #f7f7f7;
color: black;
}
.btnQuestion:hover {
background: #f7f7f7;
color: black;
}
.btnQuestion {
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
height: 80px;
width: 180px;
position: absoulte;
margin: -150px 0 0 -90px;
opacity: 0;
}
#keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes complete {
0% {opacity: 1;}
100% {opacity: 0;}
}
.animationFade {
animation-name: fade;
animation-delay: 2.0s;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.animationComplete {
animation-name: complete;
animation-delay: 0.3s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.animationRIP {
animation-name: fade;
animation-delay: 4.0s;
animation-duration: 1.0s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="poem">Oh me! Oh life! of the questions of these recurring, </br>
Of the endless trains of the faithless, of cities fill’d with the foolish, </br>
Of myself forever reproaching myself, (for who more foolish than I, and who more faithless?) </br>
Of eyes that vainly crave the light, of the objects mean, of the struggle ever renew’d, </br>
Of the poor results of all, of the plodding and sordid crowds I see around me, </br>
Of the empty and useless years of the rest, with the rest me intertwined, </br>
The question, O me! so sad, recurring—What good amid these, O me, O life?</div>
<div class="answer">
That you are here—that life exists and identity, </br>
That the powerful play goes on, and you may contribute a verse.</br>
~Walt Whitman
</div>
<div class="question">What will your verse be?
</div>
<div class="rip">R.I.P Robin Williams</br>
1951-2014</div>
<div class="btnAnswer" id="answerBtn">Answer.</div>
<div class="btnQuestion" id="questionBtn">Question.</div>
</div>
</body>
Try changing the animation start delay to 0 in the css:
.animationComplete {
animation-name: complete;
animation-delay: 0s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
I changed the animation-fil-mode of .animationComplete to backwards and it did the trick :)
.animationComplete {
animation-name: complete;
animation-delay: 0.3s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: backwards;
}
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 have created a text fadein-fadeout animation for 4 lines of text.
The lines appear one after another and so far, that's fine.
Now it's requested to to an infinite loop on all these animations.
As I am pretty new to css animations I really don't know how to handle this.
I guess I might have setup the whole thing wrong. But how can it be rebuilt, so that I have an infinite animation of all 4 lines?
Thanks for any hint!
PS: I attach the code snippet and here is the Fiddle as well for those, who prefer that: https://codepen.io/SchweizerSchoggi/pen/xxKXyyv
PS2: my question is close or similiar to another question asked 5 years ago by another user, but that one did not get an answer. That's why I asked MY question here and today. At least I got an answer that helped.
body {
font-size: 62.5%;
font-family: Arial;
}
.animation-box {
width: 75%;
height: 30rem;
background-color: darkblue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
45% {
opacity: 1;
}
100% {
opacity: 0%;
}
}
.animation-box h1 {
position: absolute;
left: 5%;
top: 0;
font-size: 4em;
color: white;
font-weight: 400;
}
.first-line,
.second-line,
.third-line,
.fourth-line {
font-size: 3em;
position: absolute;
left: 5%;
top: 20%;
opacity: 0;
color: rgba(200,200,200,0.9);
}
.first-line {
animation-name: fadeInOut;
animation-duration: 5s;
}
.second-line {
animation-name: fadeInOut;
animation-delay: 5s;
animation-duration: 5s;
}
.third-line {
animation-name: fadeInOut;
animation-delay: 10s;
animation-duration: 5s;
}
.fourth-line {
animation-name: fadeInOut;
animation-delay: 15s;
animation-duration: 5s;
}
<section class="animation-box">
<h1>Fading the lines</h1>
<div class="first-line">This is line 1</div>
<div class="second-line">here comes line 2</div>
<div class="third-line">3 is the perfect number</div>
<div class="fourth-line">the final one is 4</div>
</section>
How it works?
1: Animation duration / no. of elements = animation delay
2: You need to tweak keyframe animation as per your requirements(this may vary). You need have instinct on time appearance of your each element & time gap.
3: And add animation-iteration-count: infinite; to your individual element.
body {
font-size: 62.5%;
font-family: Arial;
}
.animation-box {
width: 75%;
height: 30rem;
background-color: darkblue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
2% {
opacity: 0;
}
5% {
opacity: 1;
}
17% {
opacity: 1;
}
19% {
opacity: 1;
}
24% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.animation-box h1 {
position: absolute;
left: 5%;
top: 0;
font-size: 4em;
color: white;
font-weight: 400;
}
.first-line,
.second-line,
.third-line,
.fourth-line {
font-size: 3em;
position: absolute;
left: 5%;
top: 20%;
opacity: 0;
color: rgba(200,200,200,0.9);
animation-name: fadeInOut;
animation-iteration-count: infinite;
}
.first-line {
animation-duration: 12s;
}
.second-line {
animation-delay: 3s;
animation-duration: 12s;
}
.third-line {
animation-delay: 6s;
animation-duration: 12s;
}
.fourth-line {
animation-delay: 9s;
animation-duration: 12s;
}
<section class="animation-box">
<h1>Fading the lines</h1>
<div class="first-line">This is line 1</div>
<div class="second-line">here comes line 2</div>
<div class="third-line">3 is the perfect number</div>
<div class="fourth-line">the final one is 4</div>
</section>
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
hello i want to make my background move but the animation is not active. Why ?
#keyframes anima {
0% {
background-position-y: 0px;
} 100% {
background-position-y: -150px;
}
}
#bando {
border-radius: 4px;
background-image: url(neon.jpg);
background-size: 130%;
width: 600px;
padding-top:40px;
padding-bottom:40px;
margin-bottom: 10px;
font-size: 30px;
height:150px;
animation-name: anima;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse;
}
Thanks in advance to help me because I am blocked on it since 4 hours
try this in https://jsfiddle.net/526vttyg/
You're missing an animation-duration, and you have to specify that, otherwise the animation won't do anything. The default animation-duration is 0
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
#bando {
border-radius: 4px;
background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);
background-size: 130%;
width: 600px;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 10px;
font-size: 30px;
height: 150px;
animation-name: anima;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse;
}
#keyframes anima {
0% {
background-position-y: 0;
}
100% {
background-position-y: -150px;
}
}
<div id="bando"></div>
I'm a little new to CSS animations, to apologies if this is a silly question :) I have the following HTML:
<div class="slideToView" rel="{{product}}">
<div class="info" rel="{{product}}">
Info
</div>
<div class="remove" rel="{{product}}">
Remove
</div>
<div style="clear:both"></div>
</div>
...and the following CSS:
/* slider option */
.slideToView {
z-index: 1000000;
background: green;
position: absolute;
right: -200px;
top: 0px;
width: 200px;
}
.slideToView.visible {
transition: 1.5s;
right: 5px;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 1.5s;
animation: slide 0.5s forwards;
animation-delay: 1.5s;
}
.slideToView.dohide {
transition: 1s;
right: -200px;
-webkit-animation: slide 0.5s backwards;
-webkit-animation-delay: 1s;
animation: slide 0.5s backwards;
animation-delay: 1s;
}
.slideToView .info {
float: left;
width: 50%;
background: #b0b6bb;
line-height: 100px;
color: white;
text-align: center;
font-weight: bold;
border-left: 1px solid #95ACBF;
box-sizing: border-box;
}
.slideToView .remove {
float: left;
width: 50%;
background: #ff0000;
line-height: 100px;
color: white;
text-align: center;
font-weight: bold;
}
#-webkit-keyframes slide {
100% { left: 0; }
}
#keyframes slide {
100% { left: 0; }
}
/* end slider options */
If I run the code in Firefox, it works fine:
However, in Chrome it slides out ok - but then it goes to the left of the page:
As I said, I'm quite new to using CSS animations - but AFAIK I have everything right.
You can see a basic example of this happening here:
https://jsfiddle.net/unbmajwv/3/
Thanks for your time!
Add dohide class to slideToView in the html. And add opacity: 0 to the .slideToView class and opacity: 1 to the .slideToView.visible class.
Updated the fiddle: https://jsfiddle.net/unbmajwv/4/