Applying css animation to div - html

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.

Related

How can I make fade out text

This is my first question on this platform.
I am trying to make anki card that shows a question for a number of seconds then I need it to fade out.
this is the code that I have found.
#-webkit-keyframes fadeIn {
100%,0%{opacity:.5;}
0%,0%{opacity:1;}
}
.fade-out {
font-size:20px;
color: dodgerblue;
background:white;
padding:10px;
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-duration:2s;
-webkit-animation-delay:4s;
This kind of stuff is usually easy to just google, but anyways this is a solution that will work perfectly
.fader {
animation: fadeOut ease 8s;
-webkit-animation: fadeOut ease 8s;
-moz-animation: fadeOut ease 8s;
-o-animation: fadeOut ease 8s;
-ms-animation: fadeOut ease 8s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
<h1 class="fader">
Hey!
</h1>
You can make an animation with the #keyframes tag. For instance
#keyframes fade-out {
100%{
opacity: 0%;
}
}
and then also in your CSS you have something like this:
.your-class{
animation: fade-out 3s linear 10s 1;
animation-fill-mode: forwards;
}
And then in your HTML you have this:
<div class="your-class">What is 1+1?</div>
The values in the CSS mean that the "fade-out" animation will be played in a 3s time and a linear animation. The 10s mean that after 10s the animation will play, so it means that the card will disappear after 10s. and the "1" means it will only play 1 time, this is optional since 1 is the default value.
animation-fill-mode means that the value that's in the animation (opacity: 0%) will remain and only goes away when you refresh the page for instance. It will overtake the default value which is normally 100%;
Hoped this helped you.

CSS fade-out and stay so [duplicate]

This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 2 years ago.
Is there a CSS only way to fade-out this text as below and have it stay hidden once the animation completes? It currently fades out, then appears again. I have tried adding display: none (as well as height: 0px, which isn't really what I want), but the issue remains - it re-appears once the animation completes.
Happy to use some JavaScript to do this (there is a stack overflow answer explaining how to listen out for the end of the animation event), but pure CSS is preferred.
.fade-out {
animation: fadeOut ease 5s;
-webkit-animation: fadeOut ease 5s;
-moz-animation: fadeOut ease 5s;
-o-animation: fadeOut ease 5s;
-ms-animation: fadeOut ease 5s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h1 class="fade-out">hello</h1>
Use animation-fill-mode: forwards; for that purpose:
.fade-out {
animation: fadeOut ease 5s;
animation-fill-mode: forwards;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h1 class="fade-out">hello</h1>

Why does animation pause on hover work in IE but not Chrome or Edge?

I have the HTML and CSS working to create a scrolling slideshow of 3 images in the same place. I want the animation to pause when I hover over any of the pictures and then just start up again where the animation left off when I stop the hover. The following code works in Internet Explorer, but not in Chrome or Edge. I need it to work in any browser. Can anyone tell me what I am doing wrong?
div.slideshow3 {
position: relative;
height: 300px;
width: 300px;
}
div.slideshow3 figure {
margin: 0;
position: absolute;
}
div.slideshow3:hover figure {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
div.slideshow3 figure:nth-child(1) {
-webkit-animation: xfade3 15s 10s infinite;
animation: xfade3 15s 10s infinite;
}
div.slideshow3 figure:nth-child(2) {
-webkit-animation: xfade3 15s 5s infinite;
animation: xfade3 15s 5s infinite;
}
div.slideshow3 figure:nth-child(3) {
-webkit-animation: xfade3 15s 0s infinite;
animation: xfade3 15s 0s infinite;
}
#-webkit-keyframes xfade3 {
0% {
opacity: 1;
}
31.3% {
opacity: 1;
}
33.3% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes xfade3 {
0% {
opacity: 1;
}
31.3% {
opacity: 1;
}
33.3% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="slideshow3">
<figure>
<img src="http://lorempixel.com/300/300/nature/1" style="width:300px; height:300px;">
</figure>
<figure>
<img src="http://lorempixel.com/300/300/nature/2" style="width:300px; height:300px;">
</figure>
<figure>
<img src="http://lorempixel.com/300/300/nature/3" style="width:300px; height:300px;">
</figure>
</div>
First of all, the behavior in Chrome and Edge is the correct one and this is probably why Microsoft has corrected the behavior in their latest browser.
The reason why it does not work is very simple. The hover selector (which pauses
the animation) has the same specificity as the other selectors which set the animation and in addition the other selectors are specified after the hover selector in the CSS file. This makes them get precedence over the hover selector at any point of time (even when the hover is on). Because of this, the animation-play-state never gets set to paused and so the animation keeps running.
Let us have a look at the specificity of the selectors one by one:
div.slideshow3:hover figure
The number of ID selectors in the above selector is 0 (so a = 0)
The number of class/attribute/pseudo-class selectors in it is 2 (so b = 2)
The number of type/pseudo-element selectors in it is 2 (so c = 2)
So, its overall specificity is 022.
div.slideshow3 figure:nth-child(1)
The number of ID selectors in the above selector is 0 (so a = 0)
The number of class/attribute/pseudo-class selectors in it is 2 (so b = 2)
The number of type/pseudo-element selectors in it is 2 (so c = 2)
So, the overall specificity for this one is also 022 but it is specified later in the CSS file.
You can read more about CSS Selector Specificity here.
You can fix this issue in two ways and they are as follows:
Move the hover selector below all the animation definition selectors. This makes the hover selector take precedence over the rest and so will pause the animation when the container is hovered on. This is the simplest solution.
div.slideshow3 {
position: relative;
height: 300px;
width: 300px;
}
div.slideshow3 figure {
margin: 0;
position: absolute;
}
div.slideshow3 figure:nth-child(1) {
-webkit-animation: xfade3 15s 10s infinite;
animation: xfade3 15s 10s infinite;
}
div.slideshow3 figure:nth-child(2) {
-webkit-animation: xfade3 15s 5s infinite;
animation: xfade3 15s 5s infinite;
}
div.slideshow3 figure:nth-child(3) {
-webkit-animation: xfade3 15s 0s infinite;
animation: xfade3 15s 0s infinite;
}
div.slideshow3:hover figure {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#-webkit-keyframes xfade3 {
0% {
opacity: 1;
}
31.3% {
opacity: 1;
}
33.3% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes xfade3 {
0% {
opacity: 1;
}
31.3% {
opacity: 1;
}
33.3% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="slideshow3">
<figure>
<img src="http://lorempixel.com/300/300/nature/1" style="width:300px; height:300px;">
</figure>
<figure>
<img src="http://lorempixel.com/300/300/nature/2" style="width:300px; height:300px;">
</figure>
<figure>
<img src="http://lorempixel.com/300/300/nature/3" style="width:300px; height:300px;">
</figure>
</div>
The alternate would be to specify your hover selector as div.slideshow3:hover figure:nth-child(n). This means there are 3 class/pseudo-class selectors in the selector and so specificity becomes higher than the others. nth-child(n) basically selects all and so that is not a problem.
div.slideshow3 {
position: relative;
height: 300px;
width: 300px;
}
div.slideshow3 figure {
margin: 0;
position: absolute;
}
div.slideshow3:hover figure:nth-child(n) {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
div.slideshow3 figure:nth-child(1) {
-webkit-animation: xfade3 15s 10s infinite;
animation: xfade3 15s 10s infinite;
}
div.slideshow3 figure:nth-child(2) {
-webkit-animation: xfade3 15s 5s infinite;
animation: xfade3 15s 5s infinite;
}
div.slideshow3 figure:nth-child(3) {
-webkit-animation: xfade3 15s 0s infinite;
animation: xfade3 15s 0s infinite;
}
#-webkit-keyframes xfade3 {
0% {
opacity: 1;
}
31.3% {
opacity: 1;
}
33.3% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes xfade3 {
0% {
opacity: 1;
}
31.3% {
opacity: 1;
}
33.3% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="slideshow3">
<figure>
<img src="http://lorempixel.com/300/300/nature/1" style="width:300px; height:300px;">
</figure>
<figure>
<img src="http://lorempixel.com/300/300/nature/2" style="width:300px; height:300px;">
</figure>
<figure>
<img src="http://lorempixel.com/300/300/nature/3" style="width:300px; height:300px;">
</figure>
</div>
Note: Even though, the hover selector takes precedence after doing one of the above changes, the animation still doesn't get paused in Edge alone. The changes mentioned above does fix the issue in Chrome, Firefox, Safari and it works in IE11, IE10 also.
The behavior in Edge seems to be very erratic. If you open this demo for the first time, the animation would be running and when you hover it will pause in Edge also but if you make any dummy changes to the code and click "Run" button, it no longer works. This is beyond explanation. I checked with few other fellow users in this chat room and everybody sees the same behavior in Edge.
Unfortunately there seems to be no way to get this to work in Edge. I have tried a variety of selector combinations (even tried inline styles with JS) but it is just not respecting the animation's play state change at all. The selector however is working perfectly fine. In the below snippet, you'd be able to notice the border changing on hover but nothing happens to the animation.
div.slideshow3 {
position: relative;
height: 300px;
width: 300px;
}
div.slideshow3 figure {
margin: 0;
position: absolute;
}
div.slideshow3:hover figure:nth-child(n) {
-webkit-animation-play-state: paused;
animation-play-state: paused;
border: 4px solid brown; /* hover border */
}
div.slideshow3 figure:nth-child(1) {
-webkit-animation: xfade3 15s 10s infinite;
animation: xfade3 15s 10s infinite;
border: 4px solid red; /* default border */
}
div.slideshow3 figure:nth-child(2) {
-webkit-animation: xfade3 15s 5s infinite;
animation: xfade3 15s 5s infinite;
border: 4px solid red; /* default border */
}
div.slideshow3 figure:nth-child(3) {
-webkit-animation: xfade3 15s 0s infinite;
animation: xfade3 15s 0s infinite;
border: 4px solid red; /* default border */
}
#-webkit-keyframes xfade3 {
0% {
opacity: 1;
}
31.3% {
opacity: 1;
}
33.3% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes xfade3 {
0% {
opacity: 1;
}
31.3% {
opacity: 1;
}
33.3% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="slideshow3">
<figure>
<img src="http://lorempixel.com/300/300/nature/1" style="width:300px; height:300px;">
</figure>
<figure>
<img src="http://lorempixel.com/300/300/nature/2" style="width:300px; height:300px;">
</figure>
<figure>
<img src="http://lorempixel.com/300/300/nature/3" style="width:300px; height:300px;">
</figure>
</div>
In any browser you are going to have to work with different parameters as each browser is going to be different. That is something you will just have to accept. However, there are things that you can do to accommodate the different browsers. In order to force it to fit, from what I learned in my html class, you are going to have to adapt your h&w so that it fits within the every browser and then check every browser.
OR just understand that you cannot write a program, in html, to fit every browser.

css3 animation, change property after animation starts?

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; }
}

Imitating a blink tag with CSS3 animations

I really want to make a piece of text blink the old-school style without using javascript or text-decoration.
No transitions, only *blink*, *blink*, *blink*!
This is different from that question because I ask for blinking without continuous transitions, whereas OP of the other questions asks how to replace blinking with continuous transitions
The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text:
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
#keyframes blink-animation {
to {
visibility: hidden;
}
}
#-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
This is <span class="blink">blinking</span> text.
You can find more info about Keyframe Animations here.
Let me show you a little trick.
As Arkanciscan said, you can use CSS3 transitions. But his solution looks different from the original tag.
What you really need to do is this:
#keyframes blink {
50% {
opacity: 0.0;
}
}
.blink {
animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>
JSfiddle Demo
Try this CSS
#keyframes blink {
0% { color: red; }
100% { color: black; }
}
#-webkit-keyframes blink {
0% { color: red; }
100% { color: black; }
}
.blink {
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
}
This is <span class="blink">blink</span>
​
You need browser/vendor specific prefixes: http://jsfiddle.net/es6e6/1/.
There's actually no need for visibility or opacity - you can simply use color, which has the upside of keeping any "blinking" to the text only:
blink {
display: inline;
color: inherit;
animation: blink 1s steps(1) infinite;
-webkit-animation: blink 1s steps(1) infinite;
}
#keyframes blink { 50% { color: transparent; } }
#-webkit-keyframes blink { 50% { color: transparent; } }
Here is some text, <blink>this text will blink</blink>, this will not.
Fiddle: http://jsfiddle.net/2r8JL/
I'm going to hell for this :
=keyframes($name)
#-webkit-keyframes #{$name}
#content
#-moz-keyframes #{$name}
#content
#-ms-keyframes #{$name}
#content
#keyframes #{$name}
#content
+keyframes(blink)
25%
zoom: 1
opacity: 1
65%
opacity: 1
66%
opacity: 0
100%
opacity: 0
body
font-family: sans-serif
font-size: 4em
background: #222
text-align: center
.blink
color: rgba(#fff, 0.9)
+animation(blink 1s 0s reverse infinite)
+transform(translateZ(0))
.table
display: table
height: 5em
width: 100%
vertical-align: middle
.cell
display: table-cell
width: 100%
height: 100%
vertical-align: middle
http://codepen.io/anon/pen/kaGxC (sass with bourbon)
Another variation
.blink {
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
#-webkit-keyframes blink { 50% { visibility: hidden; }}
#keyframes blink { 50% { visibility: hidden; }}
This is <span class="blink">blink</span>
If you want smooth blinking text or something a like you can use following code:
.blinking {
-webkit-animation: 1s blink ease infinite;
-moz-animation: 1s blink ease infinite;
-ms-animation: 1s blink ease infinite;
-o-animation: 1s blink ease infinite;
animation: 1s blink ease infinite;
}
#keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-moz-keyframes blink {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-ms-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-o-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
<span class="blinking">I am smoothly blinking</span>
It's working in my case blinking text at 1s interval.
.blink_me {
color:#e91e63;
font-size:140%;
font-weight:bold;
padding:0 20px 0 0;
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% { opacity: 0.4; }
}
if you want some glow effect use this
#keyframes blink {
50% {
opacity: 0.0;
}
}
#-webkit-keyframes blink {
50% {
opacity: 0.0;
}
}
atom-text-editor::shadow .bracket-matcher .region {
border:none;
background-color: rgba(195,195,255,0.1);
border-bottom: 1px solid rgb(155,155,255);
box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
border-radius: 3px;
animation: blink 2s steps(115, start) infinite;
-webkit-animation: blink 2s steps(115, start) infinite;
}
Please find below solution for your code.
#keyframes blink {
50% {
color: transparent;
}
}
.loader__dot {
animation: 1s blink infinite;
}
.loader__dot:nth-child(2) {
animation-delay: 250ms;
}
.loader__dot:nth-child(3) {
animation-delay: 500ms;
}
Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>