I'm trying to make a CSS animation were a word fades out, another words replaces it and the new word fades in. Can't seem to figure out the correct way to do it. Here's my code:
HTML
<span class="words"></span>
CSS
.words:before {
content: "one";
animation-name: replacement;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes replacement {
0% {
opacity: 0;
}
100% {
opacity: 1;
content: "two";
}
}
https://jsfiddle.net/fp2h6q4L/
Try this CSS
.words:before {
opacity:0;
content: "one";
animation-name: replacement;
animation-duration: 4s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-direction: absolute;
}
#keyframes replacement {
0%{
opacity: 1;
}
50%{
opacity:0;
}
100%{
content:"two";
opacity:1;
}
}
<span class="words"></span>
If you want to do this with pure CSS, you'll probably need to define a second animation to change the text and then set the delay on that one to run when opacity is 0 so that the abrupt change is hidden.
Related
This question already has answers here:
How to have multiple CSS transitions on an element?
(9 answers)
Play multiple CSS animations at the same time
(6 answers)
Closed 1 year ago.
I'd like to apologise upfront for my code and question. I'm a graphic designer but have been editing some html for online digital banners.
Currently I have a colored bar slide in from the left to the right after 2 secs.
This works well using 'animation-name:barAnim'
Then I want that same bar to fade out after 7.5 secs.
However once I add 'animation-name:fadeOut' the bar breaks and only flashes at the 7.5 second mark.
All of this needs to work automatically without any user input.
Please see current code below.
Any help would be really really appreciated.
.col_bar1 {
left: 0px;
top: 412px;
width: 132px;
height: 11px;
background: #5d7773;
opacity: 0;
}
.col_bar1 {
animation-name: barAnim;
-webkit-animation-name: barAnim;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.col_bar {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes barAnim {
0% {
-webkit-transform: translate3d(-130px, 0, 0);
transform: translate3d(-130px, 0, 0);
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0);
}
}
#-webkit-keyframes barAnim {
0% {
-webkit-transform: translate3d(-130px, 0, 0);
transform: translate3d(-130px, 0, 0);
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0);
/*--start from lhs--*/
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="col_bar1"></div>
You can do comma separated animations. I have used the animation shorthand here and split it to multiple lines for readability.
CSS
animation:
barAnim 0.5s ease-out 2s forwards,
fadeOut 0.2s ease-in-out 7.5s forwards;
-webkit-animation:
barAnim 0.5s ease-out 2s forwards,
fadeOut 0.2s ease-in-out 7.5s forwards;
I'm trying to make an animation-delay on my animation. The animation is used on some text, and the animation-delay line doesn't seem to work.
Here is the code :
.wtitle {
opacity:100%;
animation-name: afade;
animation-duration: 1s;
animation-delay: 15s;
}
#keyframes afade {
from {
opacity:0;
}
to {
opacity:100%;
}
}
Does anyone have an idea ?
You need animation-fill-mode: both;
Without this line, your animation will only have any effect when it is actually running. That means at the 15 seconds delay, the animation has no effect on the .htitle whatsoever.
.wtitle {
opacity:100%;
animation-name: afade;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: both;
}
#keyframes afade {
from {
opacity:0;
}
to {
opacity:100%;
}
}
<h1 class="wtitle">Hello</h1>
.wtitle {
opacity: 100%;
background: red;
animation-name: afade;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: both;
}
You are missing 1 attribute.
EDIT: corrected a typo in the CSS noted by ARLCode below - not relevant.
Using only CSS, I'm trying to animate some text, so that different blocks of text start hidden, become visible on a timer, and then fade on a timer, in sequence.
First, I start with all of the text hidden using p {visibility: hidden}, and add an animation to change the visibility value after n seconds.
In addition, I nested <p> in <div> and added an animation to fade <div> by animating opacity. This should fade the text that had just appeared, after (n+x) seconds.
The fade-out is no problem, but the pop-in never works. When I try to animate visibility, no matter how, the page always loads with the selected text visible, despite its earlier setting as hidden. Thus, it doesn't pop-in. It's just already there on the page. Below is the code and a link to codepen.
Am I on the wrong track?
HTML
<p id="one">this is visible on page load and then fades</p>
<div id="two-container"> <!---this div is for fading the text--->
<p id="two">this should START hidden, then appear AFTER p one fades</p>
</div>
CSS
/***************************************
GENERAL
***************************************/
p {
visibility: hidden;
}
/***************************************
TEXT ANIMATION SEQUENCE
***************************************/
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
-webkit-animation-name: pop-in;
animation-name: pop-in;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two-container {
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/***************************************
ANIMATION KEYFRAMES
***************************************/
#-webkit-keyframes fade-out {
0%, 50% {opacity: 1; }
100% {opacity: 0; }
}
#-webkit-keyframes pop-in {
0% {visibility: hidden; }
100% {visibility: visible; }
}
Code Pen Demo
You can see in the preview that the page loads #two as visible, despite p {visibility:hidden;} in the general section. Removing the pop-in animation fixes this. The fade-out animation for #two-container works fine. What am I missing?
A point of clarity: I do NOT expect - as many others here have - for visibility to animate as a fade. I want the desired text to appear suddenly, and AFTERWARDS fade gradually - thus the second animation selecting <div>. The binary nature of visibility is fine.
Okay, here you go I think this is the effect you want.
CSS
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
visibility: hidden;
-webkit-animation: pop-in 2s;
-webkit-animation-delay: 4s;
-moz-animation: pop-in 2s;
-ms-animation: pop-in 2s;
-o-animation: pop-in 2s;
animation: pop-in 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fade-out {
from {opacity: 1; }
to {opacity: 0; }
}
#-webkit-keyframes pop-in {
0% { visibility: visible; opacity: 0; -webkit-transform: scale(0.5); }
100% { visibility: visible; opacity: 1; -webkit-transform: scale(1); }
}
#-moz-keyframes pop-in {
0% { visibility: visible; opacity: 0; -moz-transform: scale(0.5); }
100% { opacity: 1; -moz-transform: scale(1); }
}
#keyframes pop-in {
0% { visibility: visible; opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}
Codepen Demo
The issue is you placed -webkit- as --webkit- I fixed the CSS down below.
CSS
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
-webkit-animation-name: pop-in;
animation-name: pop-in;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two-container {
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fade-out {
0%, 50% {opacity: 1; }
100% {opacity: 0; }
}
Code Pen Demo
This question already has answers here:
Alternative for <blink>
(14 answers)
Closed 9 years ago.
I am making a website and I want a hyperlink on the page to blink. It doens't matter how fast it does, only not too slow. It would also be cool if I could make it blink in different colors.
I have tried using text-decoration:blink; in css, but that didn't work.
I've added this to the css-file, but now what?:
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 1s;
}
Doesn't seem to work
You can do this pretty easily with CSS animations.
a {
animation-duration: 400ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
You can also extend it to change colors. With something like:
#keyframes blink {
0% {
opacity: 1;
color: pink;
}
25% {
color: green;
opacity: 0;
}
50% {
opacity: 1;
color: blue;
}
75% {
opacity: 0;
color: orange;
}
100% {
opacity: 1;
color: pink;
}
}
Make sure to add vendor prefixes
Demo: http://codepen.io/pstenstrm/pen/yKJoe
Update
To remove the fading effect you can do:
b {
animation-duration: 1000ms;
animation-name: tgle;
animation-iteration-count: infinite;
}
#keyframes tgle {
0% {
opacity: 0;
}
49.99% {
opacity: 0;
}
50% {
opacity: 1;
}
99.99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
This is also a useful trick when animating image-sprites
Its easy to make a text blink:
window.setInterval(function() {
$('#blinkText').toggle();
}, 300);
and in html, just give as follows:
<p id="blinkText">Text blinking</p>
You seem to have copied code from the accepted answer to Blink not working in Chrome. The answer is wrong, however, and only tries to address WebKit browsers. The following code works in WebKit browsers, in modern Firefox, and in IE 10+ (I have set the parameters to simulate the way the classic <blink> worked):
#keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}
#-webkit-keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}
blink {
animation-name: blink;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
}
For a real cross-browser solution, you need JavaScript. It’s straighforward timed changes; see e.g. some answers to Text blinking jQuery.
please see below:
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { height:200px; }
50% {opacity:1}
50% {height:300px; opacity: 0; }
}
I would like to start fading the object away only 50% thorugh the animation. not at the beginning. This currently doesn't do any opacity animation.
Not getting your question quiet well but I assume you want to delay the start of your animation, if it's that so.. than you can use animation-delay property... This will help you in delay your animation by few seconds
Demo (Modified demo of my answer here)
.blink_me {
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
As commented by jCuber, if you want to start animation at 50% than try this
Demo
try this i made some changes in your fiddle it's work and also link of new fiddle
<div class="blink_me"> Blink</div>
.blink_me {
animation-name: blinker;
animation-duration: 5s;
animation-iteration-count: infinite;
-webkit-animation-name: blinker;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
background:#ff0000;
border:1px solid #00ff00;
}
#-webkit-keyframes blinker {
0% {width:20px; opacity: 0;}
50% {width:20px; opacity: 1; }
100% {width:50px; opacity: 0; }
}
http://jsfiddle.net/umz8t/293/
it looks like you just made a simple mistake the last line should read 100% not 50%. It could actually read anything between 51% to 100%. You also were missing a semi-colon, added it in.
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { height:200px; }
50% {opacity:1; }
100% {height:300px; opacity: 0; }
}