Currently, I have this code:
#-webkit-keyframes blinker {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
.waitingForConnection {
-webkit-animation-name: blinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
}
It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back with opacity: 1.0, then again fades out, appears again, and so on...
I would like it to fade out, and then "raise" from this fade back again to opacity: 1.0. Is that possible?
You are first setting opacity: 1; and then you are ending it on 0, so it starts from 0% and ends on 100%, so instead just set opacity to 0 at 50% and the rest will take care of itself.
Demo
.blink_me {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<div class="blink_me">BLINK ME</div>
Here, I am setting the animation duration to be 1 second, and then I am setting the timing to linear. That means it will be constant throughout. Last, I am using infinite. That means it will go on and on.
Note: If this doesn't work for you, use browser prefixes like
-webkit, -moz and so on as required for animation and
#keyframes. You can refer to my detailed code here
As commented, this won't work on older versions of Internet Explorer, and for that you need to use jQuery or JavaScript...
(function blink() {
$('.blink_me').fadeOut(500).fadeIn(500, blink);
})();
Thanks to Alnitak for suggesting a better approach.
Demo (Blinker using jQuery)
The best way to get a pure "100% on, 100% off" blink, like the old <blink> is like this:
.blink {
animation: blinker 1s step-start infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<div class="blink">BLINK</div>
Use the alternate value for animation-direction (and you don't need to add any keframes this way).
alternate
The animation should reverse direction each cycle. When playing in reverse, the animation steps are performed backward. In addition, timing functions are also reversed; for example, an ease-in animation is replaced with an ease-out animation when played in reverse. The count to determinate if it is an even or an odd iteration starts at one.
CSS:
.waitingForConnection {
animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
#keyframes blinker { to { opacity: 0; } }
I've removed the from keyframe. If it's missing, it gets generated from the value you've set for the animated property (opacity in this case) on the element, or if you haven't set it (and you haven't in this case), from the default value (which is 1 for opacity).
And please don't use just the WebKit version. Add the unprefixed one after it as well. If you just want to write less code, use the shorthand.
.waitingForConnection {
animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
#keyframes blinker { to { opacity: 0; } }
.waitingForConnection2 {
animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;
}
#keyframes blinker2 { to { opacity: 0; } }
.waitingForConnection3 {
animation: blinker3 1s ease-in-out infinite alternate;
}
#keyframes blinker3 { to { opacity: 0; } }
<div class="waitingForConnection">X</div>
<div class="waitingForConnection2">Y</div>
<div class="waitingForConnection3">Z</div>
If you want smooth animations, try this.
.blink {
animation: blinker 1s infinite;
}
#keyframes blinker {
from { opacity: 1.0; }
50% { opacity: 0.5; }
to { opacity: 1.0; }
}
<span class="blink">I am blinking</span>
Alternatively if you do not want a gradual transition between show and hide (e.g. a blinking text cursor) you could use something like:
/* Also use prefixes with #keyframes and animation to support current browsers */
#keyframes blinker {
from { visibility: visible }
to { visibility: hidden }
/* Alternatively you can do this:
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
if you don't want to use `alternate` */
}
.cursor {
animation: blinker steps(1) 500ms infinite alternate;
}
Every 1s .cursor will go from visible to hidden.
If CSS animation is not supported (e.g. in some versions of Safari) you can fallback to this simple JS interval:
(function(){
var show = 'visible'; // state var toggled by interval
var time = 500; // milliseconds between each interval
setInterval(function() {
// Toggle our visible state on each interval
show = (show === 'hidden') ? 'visible' : 'hidden';
// Get the cursor elements
var cursors = document.getElementsByClassName('cursor');
// We could do this outside the interval callback,
// but then it wouldn't be kept in sync with the DOM
// Loop through the cursor elements and update them to the current state
for (var i = 0; i < cursors.length; i++) {
cursors[i].style.visibility = show;
}
}, time);
})()
This simple JavaScript is actually very fast and in many cases may even be a better default than the CSS. It's worth noting that it is lots of DOM calls that make JS animations slow (e.g. JQuery's $.animate()).
It also has the second advantage that if you add .cursor elements later, they will still animate at exactly the same time as other .cursors since the state is shared, this is impossible with CSS as far as I am aware.
#-webkit-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; }
}
.blink {
width: 10px;
height: 10px;
border-radius: 10px;
animation: blinker 2s linear infinite;
background-color: red;
margin-right: 5px;
}
.content {
display: flex;
flex-direction: row;
align-items: center;
}
<div class="content">
<i class="blink"></i>
LIVE
</div>
I don't know why but animating only the visibility property is not working on any browser.
What you can do is animate the opacity property in such a way that the browser doesn't have enough frames to fade in or out the text.
Example:
span {
opacity: 0;
animation: blinking 1s linear infinite;
}
#keyframes blinking {
from,
49.9% {
opacity: 0;
}
50%,
to {
opacity: 1;
}
}
<span>I'm blinking text</span>
My solution:
.blink {
animation: blinkMe 2s linear infinite;
}
#keyframes blinkMe {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<p class="blink">Blink</p>
I use blinkMe for the name of the animation, 2s for the duration, linear for the timing, and infinite so that it repeats forever.
We need to use JavaScript and jQuery for older browsers as they don’t support animation and/or #keyframes:
$(document).ready(function() {
window.setInterval(function() {
$(".blink").fadeIn(1000).fadeOut(1000);
}, 2000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p class="blink">Blink</p>
If you want to make a blink effect that works just like the blink tag, this will work:
.blink {
animation: blink 0.5s step-start infinite;
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<p class="blink">Blink</p>
Change the durations if you want to adjust the speed.
Change duration and opacity to suit.
.blink_text {
-webkit-animation-name: blinker;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite; color: red;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.3; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.3; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.3; }
100% { opacity: 1.0; }
}
Late but wanted to add a new one with more keyframes ... here is an example on CodePen since there was an issue with the built-in code snippets:
.block{
display:inline-block;
padding:30px 50px;
background:#000;
}
.flash-me {
color:#fff;
font-size:40px;
-webkit-animation: flash linear 1.7s infinite;
animation: flash linear 1.7s infinite;
}
#-webkit-keyframes flash {
0% { opacity: 0; }
80% { opacity: 1; color:#fff; }
83% { opacity: 0; color:#fff; }
86% { opacity: 1; color:#fff;}
89% { opacity: 0}
92% { opacity: 1; color:#fff;}
95% { opacity: 0; color:#fff;}
100% { opacity: 1; color:#fff;}
}
#keyframes flash {
0% { opacity: 0; }
80% { opacity: 1; color:#fff; }
83% { opacity: 0; color:#fff; }
86% { opacity: 1; color:#fff;}
89% { opacity: 0}
92% { opacity: 1; color:#fff;}
95% { opacity: 0; color:#fff;}
100% { opacity: 1; color:#fff;}
}
<span class="block">
<span class="flash-me">Flash Me Hard</span>
</span>
.neon {
font-size: 20px;
color: #fff;
text-shadow: 0 0 8px yellow;
animation: blinker 6s;
animation-iteration-count: 1;
}
#keyframes blinker {
0% {
opacity: 0.2;
}
19% {
opacity: 0.2;
}
20% {
opacity: 1;
}
21% {
opacity: 1;
}
22% {
opacity: 0.2;
}
23% {
opacity: 0.2;
}
36% {
opacity: 0.2;
}
40% {
opacity: 1;
}
41% {
opacity: 0;
}
42% {
opacity: 1;
}
43% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
I used font-family: "Quicksand", sans-serif;
This is the import of the font (goes on the top of the style.css)
#import url("https://fonts.googleapis.com/css2?family=Quicksand:wght#300&display=swap");
<style>
.class1{
height:100px;
line-height:100px;
color:white;
font-family:Bauhaus 93;
padding:25px;
background-color:#2a9fd4;
border:outset blue;
border-radius:25px;
box-shadow:10px 10px green;
font-size:45px;
}
.class2{
height:100px;
line-height:100px;
color:white;
font-family:Bauhaus 93;
padding:25px;
background-color:green;
border:outset blue;
border-radius:25px;
box-shadow:10px 10px green;
font-size:65px;
}
</style>
<script src="jquery-3.js"></script>
<script>
$(document).ready(function () {
$('#div1').addClass('class1');
var flag = true;
function blink() {
if(flag)
{
$("#div1").addClass('class2');
flag = false;
}
else
{
if ($('#div1').hasClass('class2'))
$('#div1').removeClass('class2').addClass('class1');
flag = true;
}
}
window.setInterval(blink, 1000);
});
</script>
It works for me by using class=blink for the respective element(s)
Simple JS Code
// Blink
setInterval(function()
{
setTimeout(function()
{
//$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
$(".blink").css("visibility","hidden"); // This is for Visibility of the element
},900);
//$(".blink").css("color","rgba(0,0,0,1)"); // If you want simply black/white blink of text
$(".blink").css("visibility","visible"); // This is for Visibility of the element
},1000);
This is good example for everyone. Try it once
.blinking_live {
height: 15px;
width: 15px;
border-radius: 15px;
background: #58C03D;
animation: blink-live 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
#keyframes blink-live{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
<div class="blinking_live"></div>
I'm trying to use CSS or jQuery to constantly switch between two images. What I have works ok, but it's essentially placing an image on top of the other one, which causes issues if the images I'm using are transparent.
section {
position: relative;
}
section img {
position: absolute;
width: 200px;
}
.top {
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}
#keyframes fade {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<section>
<img class="bottom" src="https://placeimg.com/640/480/nature">
<img class="top" src="https://placeimg.com/640/480/arch">
</section>
Codepen: https://codepen.io/Rhys_Eng/pen/NWdwxaO
To solve the issue with transparent images overlaying each other you can use your current technique to fade out the underlying image as the new one is displayed over it. To do that add a 1 second delay to its animation. Try this:
section img {
position: absolute;
width: 200px;
animation: fade 1s infinite alternate;
}
.bottom {
animation-delay: 1s;
}
#keyframes fade {
0% { opacity: 1; }
25% { opacity: 1; }
75% { opacity: 0; }
100% { opacity: 0; }
}
<section>
<img class="bottom" src="https://placeimg.com/640/480/nature">
<img class="top" src="https://placeimg.com/640/480/arch">
</section>
If you wanted to change the image without fading, while still using CSS alone, then you can amend the keyframes to this:
#keyframes fade {
0% { opacity: 1; }
49% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
I am currently writing a HTML5/JS Webapp which will be integrated into pre-existing HTML code. The pre-existing code contains an iframe which then loads the URL of my webapp.
I have the following animation set up in my CSS file:
#-moz-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#-webkit-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
.container .left .people-container .people .person.slideInLeft {
-webkit-animation: peopleSlideLeft 0.75s forwards;
-moz-animation: peopleSlideLeft 0.75s forwards;
animation: peopleSlideLeft 0.75s forwards;
}
Now if I start my webapp in a window of its own, then the animation plays without issue, however when the webapp is loaded through the iframe, the animation does not fire (Note: This issue only occurs in IE11. Chrome, Firefox and Edge all work correctly both in iframe and out).
The slideInLeft class is definitely attached to the HTML Elements I want to animate, and the #keyframes are definitely in the loaded CSS, but the animation will still not play.
Following images are directly from the IE11 Dev Console:
Is there something I am missing?
Make sure you add non-prefix at the end
#-moz-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#-webkit-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#-ms-keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
#keyframes peopleSlideLeft {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
.container .left .people-container .people .person.slideInLeft {
-webkit-animation: peopleSlideLeft 0.75s forwards;
-moz-animation: peopleSlideLeft 0.75s forwards;
-ms-animation: peopleSlideLeft 0.75s forwards;
animation: peopleSlideLeft 0.75s forwards;
}
So I have since found out what the issue was. The parent page which contained the iframe that loaded my webapp had the following meta tag in the head section:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Modifying this to be
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10">
Which allowed the animations to complete successfully.
So I'm getting acquainted with css3 and I've been trying to find a purely css slider. I finally found one that is exactly as I was looking for on code pen but for some reason when I try the code in localhost or jsfiddle it doesn't work. There is no external files that its accessing as far as I can tell in codepen and there is no jQuery needed. Below I've linked the (working) codepen and jsfiddle. Any ideas why it wont work elsewhere?
codepen
jsFiddle
html
<div class="slider">
<img class='photo' src="http://i.imgur.com/zMGSiyl.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/soQhb13.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/39yOaYB.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/tnctKD4.jpg" alt="" />
</div>
css
body{background:#000;}
.slider{
margin:50px auto;
width:100%;
height:300px;
overflow:hidden;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
width:100%;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
You may need to use vendor specific keyframes. Codepen is clever and is overcompensating in this instance.
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
More info http://css-tricks.com/snippets/css/keyframe-animation-syntax/
This works perfectly, please check: jsFiddle Demo. The syntax for the CSS3 animations and the keyframes which was being used in the code was the standard syntax, for e.g. animation:round 16s infinite;, #keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } and img:nth-child(4){animation-delay:0s;}.
You should instead use -webkit-animation:round 16s infinite;`, `#-webkit-keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } ` and `img:nth-child(4){-webkit-animation-delay:0s;} so that it's browser compatible.
More information on this is available over here.
body {
background: #000;
}
.slider {
margin: 50px auto;
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.photo {
position: absolute;
-webkit-animation: round 16s infinite;
-moz-animation: round 16s infinite;
-o-animation: round 16s infinite;
animation: round 16s infinite;
opacity: 0;
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#-moz-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#-o-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(4) {
-webkit-animation-delay: 0s;
}
img:nth-child(3) {
-webkit-animation-delay: 4s;
}
img:nth-child(2) {
-webkit-animation-delay: 8s;
}
img:nth-child(1) {
-webkit-animation-delay: 12s;
}
<div class="slider">
<img class='photo' src="http://i.imgur.com/zMGSiyl.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/soQhb13.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/39yOaYB.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/tnctKD4.jpg" alt="" />
</div>
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.