I have a very simple animation that fades out and shrinks a div.
But the problem is that when the animation finishes it goes back to the start and stays there.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
If you add animation-fill-mode: forwards; to your .fade-out rule it will fix your animation.
animation-fill-mode specifies how CSS rules should be applied before and after executing the animation. The default is none which means that before and after the animation is executed, it will not apply any of the animation styles. That's why you're seeing it revert to the pre-animation state.
forwards tells the browser to retain the styles from the last keyframe. That's what you're looking for.
See the MDN docs for more information.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
Use animation-fill-mode property
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards
}
Related
I am trying to get a multi-line typewriter effect on my site. I have the code below and it does work except it shows the text before the animation occurs. So while the first line is typing, the second shows below it. After the first line types out, then the second line disappears and types out. I feel like I must be missing something small. I am pretty new to coding.
/*copy and paste this into your CSS editor*/
.typewriter p {
white-space: nowrap;
overflow: hidden;
}
.typewriter p:nth-child(1) {
/*If you are having problems with text clipping change the width from 16em to a higher value*/
width: 16em;
animation: type 2s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.typewriter p:nth-child(2) {
/*If you are having problems with text clipping change the width from 13.5em to a higher value*/
width: 16em;
opacity: 0;
-webkit-animation: type2 5s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type {
0% {
width: 0;
}
100% {
border: none;
}
}
#-webkit-keyframes type {
0% {
width: 0;
}
100% {
border: none;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 0;
border: none;
}
}
<div class="typewriter">
<p> Words have power.</p>
<p> We leverage that power for good.</p>
</div>
While I do not see exactly what is described in the question which says the second line shows, I see the first line showing for one second before the animation begins but the second line stays hidden until its turn for animating.
The main problem seems to be that the first line has a delay of one second and during that second its opacity is at the default setting, which is 1, so we see it briefly.
There are also some inconsistencies between the -webkit- prefixed version and the non prefixed version which this snippet alters so that the timings of both are the same.
/*copy and paste this into your CSS editor*/
.typewriter p {
white-space: nowrap;
overflow: hidden;
}
.typewriter p:nth-child(1) {
/*If you are having problems with text clipping change the width from 16em to a higher value*/
width: 16em;
animation: type 2s steps(40, end);
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: 0;
}
.typewriter p:nth-child(2) {
/*If you are having problems with text clipping change the width from 13.5em to a higher value*/
width: 16em;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type {
0% {
width: 0;
opacity: 1;
}
100% {
border: none;
opacity: 1;
}
}
#-webkit-keyframes type {
0% {
width: 0;
opacity: 1;
}
100% {
border: none;
opacity: 1;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
border: none;
}
}
<div class="typewriter">
<p> Words have power.</p>
<p> We leverage that power for good.</p>
</div>
I'm trying to animate in CSS3 margins, which this site seems to say you can, but I can't get working.
I actually have 3 animations. 1 for a simple initial fadeIn on initial load, then the 2 others for the margin animation on click. I've also just tried margin instead of the top and bottom but still no sign of it working.
Click on a section to see animation toggle.
$(".section").click(function() {
$(this).toggleClass("open");
});
body{
background: #f1f1f1;
}
.section{
display: block;
background: #fff;
border-bottom: 1px solid #f1f1f1;
animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
margin: 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
</div>
Here is a JSFiddle: http://jsfiddle.net/ybh0thp9/3/
You don't need keyframes for this: http://jsfiddle.net/BramVanroy/ybh0thp9/7/
transition: margin 700ms;
You need to add the transition property to the base element that you wish to animate.
You also mentioned that you wanted opacity change, but I don't see how that's possible considering you only have a single element without children. I mean: you can't click on the element if it's hidden.
What you can do, though, is add opacity to the whole thing: http://jsfiddle.net/BramVanroy/ybh0thp9/9/
Or even prettier, with a transformation:
http://jsfiddle.net/BramVanroy/ybh0thp9/10/
.section {
margin: 0;
opacity: 0.7;
transform: scale(0.85);
transition: all 700ms;
}
.section.open {
margin: 20px 0;
opacity: 1;
transform: scale(1);
}
Per comment, you want to fade in the elements on page load. We can do that by adding a class init.
http://jsfiddle.net/BramVanroy/ybh0thp9/12/
$(".section").addClass("init"); // JS
.section.init {opacity: 1;} // CSS
With keyframes: http://jsfiddle.net/BramVanroy/ybh0thp9/14/
#-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
#-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
#keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
-webkit-animation: fadeIn 1.5s ease;
-moz-animation: fadeIn 1.5s ease;
animation: fadeIn 1.5s ease;
Tip for using transitions if it still isn't working...
Make sure you're not setting two separate transitions for different properties like this:
transition: margin 1000ms ease-in-out;
transition: box-shadow 1000ms ease-in-out;
It's obvious what's happening when looking in your browser's debugging tools:
The box-shadow will animate as intended, but margin isn't considered due to normal css rule handling.
The correct way is to combine the rules:
transition: margin 1000ms ease-in-out, box-shadow 1000ms ease-in-out;
To create animations witch CSS3 you need to:
Create a class with animation attribute; to work in some browsers you need to put prefixes: -webkit-, -o-, -moz-.
Create animation keyframes
see the example:
.animate{
animation: myAnimation 10s;
animation-direction: alternate;
animation-play-state: running;
animation-iteration-count: infinite;
animation-delay: 0;
animation-timing-function: 1;
animation-direction: alternate;
-webkit-animation: myAnimation 10s;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-timing-function: 1;
-webkit-animation-direction: alternate;
-moz-animation: myAnimation 10s;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-timing-function: 1;
-moz-animation-direction: alternate;
-o-animation: myAnimation 10s;
-o-animation-direction: alternate;
-o-animation-play-state: running;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-timing-function: 1;
-o-animation-direction: alternate;
}
#keyframes myAnimation {
0% { margin-top: 0; margin-left: 50px}
25% { margin-top: 100px; margin-left: 50px }
50% { margin-top: 0; margin-left: 50px }
75% { margin-top: 100px; margin-left: 50px }
100% { margin-top: 0; margin-left: 50px }
}
#-webkit-keyframes myAnimation {
0% { margin-top: 0; margin-left: 100px}
25% { margin-top: 100px; margin-left: 100px }
50% { margin-top: 0; margin-left: 100px }
75% { margin-top: 100px; margin-left: 100px }
100% { margin-top: 0; margin-left: 100px }
}
#-moz-keyframes myAnimation {
0% { margin-top: 0; margin-left: 100px}
25% { margin-top: 100px; margin-left: 100px }
50% { margin-top: 0; margin-left: 100px }
75% { margin-top: 100px; margin-left: 100px }
100% { margin-top: 0; margin-left: 100px }
}
#-o-keyframes myAnimation {
0% { margin-top: 0; margin-left: 100px}
25% { margin-top: 100px; margin-left: 100px }
50% { margin-top: 0; margin-left: 100px }
75% { margin-top: 100px; margin-left: 100px }
100% { margin-top: 0; margin-left: 100px }
}
I've created a div with a background image in css and I want the div/image to have an automatic fade in and fade out effect.
I've gathered the css animation for this to work however I have no idea as to how I can combine the css of the animation with my current div's css. So here is what I have so far
HTML
<div id="image"></div>
CSS
div.image {
content:url(http://www.google.com/images/srpr/logo3w.png);
float:left;
}
Animation CSS
#-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
-webkit-animation: blink 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 1s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 1s;
-o-animation-iteration-count: infinite;
}
You need to target the div with the background image.
#image targets <div id="image">
.image targets <div class="image">
img targets <img>
You can read more on CSS selectors over at MDN.
Have an example!
CSS
#image {
-webkit-animation: blink 3s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 3s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 3s;
-o-animation-iteration-count: infinite;
}
You should also specify a background-image instead of using content:
Note: If there is no content in your div you need to specify a width and height in order to see the background image. By default, the image will be repeated - using no-repeat will have the image only displayed once. Read more on CSS backgrounds here.
Same example but with a background image.
div#image {
background:url(http://www.google.com/images/srpr/logo3w.png) no-repeat;
height: 95px;
width: 280px;
float:left;
}
You have some errors in your CSS.
Your div have id="image". But you selected div.image instead of div#image
You applied the animation property on img instead on your div.
The proper CSS would be
div#image {
content:url(http://www.google.com/images/srpr/logo3w.png);
float:left;
-webkit-animation: blink 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 1s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 1s;
-o-animation-iteration-count: infinite;
}
#-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Here is a DEMO
A part of your css code if for the <blink> element and it works if you change it accordingly.
Take a look at my example on jsfiddle.
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.
Have so far got this
http://codepen.io/tacrossman/pen/GJglH
But what i want is for the cursor blinking animation to be running after each new word (span) is written out.
When I try and do something like
.type:after {
content:"_";
opacity: 0;
animation: cursor 1s infinite;
}
it doesn't have the desired effect. I am thinking that there is a conflict in the animation as i am technically running an animation within something that is already animating.
If you need anything else let me know, thanks a lot
Like this? Pretty sure this is what you were trying to achieve.
Updated Codepen result
span > span {
animation: cursor 1s infinite;
}
I also fixed a few glitches in the animation.. some were overlapping each other.
Are you using Safari or Chrome? I'm using Firefox and I noticed an issue is that you are inconsistent with your prefixes.
Here's new code without the webkit prefixes (add them back if you want, but considering it's not working for you, I'm assuming they're not necessary):
Working JSBIN: http://jsbin.com/ITokiXO/1/edit
.type{
position: absolute;
opacity: 0;
width: 12ch;
overflow: hidden;
animation: words 18s steps(12) infinite 0s;
}
.type:nth-child(2) {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.type:nth-child(3) {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.type:nth-child(4) {
-webkit-animation-delay: 9s;
animation-delay: 9s;
}
.type:nth-child(5) {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.type:nth-child(6) {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
#keyframes words {
0% { opacity: 0; width:0; }
2% { opacity: 1;}
14% { opacity: 1; width: 12ch;}
15% { opacity: 0; }
}
.cursor:after {
content:" _";
opacity: 0;
animation: cursor 1s infinite;
}
#keyframes cursor {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
here is a type effect but it uses steps in the animation function:
http://codepen.io/jonathan/pen/lwFzv
#-webkit-keyframes typing {
from { width: 0 }
to { width:14em }
}
#keyframes typing {
from { width: 0 }
to { width:14em }
}
#-webkit-keyframes caret {
from, to { border-color: transparent }
50% { border-color: black }
}
#keyframes caret {
from, to { border-color: transparent }
50% { border-color: black }
}
body { font-family: Consolas; }
h1 {
font-size:150%;
width:14em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid #333;
-webkit-animation: typing 13s steps(26, end),
caret 0.5s step-end infinite;
animation: typing 13s steps(26, end),
caret 0.5s step-end infinite;
}
you will notice the steps is set to 26 which is the number of characters in my H1
<h1>Typing Effect by Jonathan.</h1>
you could probably use the :after but it might require JS to calculate the word length for each word
also it best to always add the property without the vendor prefixes so it can used in browsers that support the animation property.. like in this case firefox does not need the vendor prefix
http://caniuse.com/#feat=css-animation