I am new to CSS3 and working on a CSS3 code for blinking images. I just need to show an image with it blinking continually. I can't use a GIF image since the images come dynamically.
it's very simple... just use a CSS3 animation on opacity of the image
I hope this helps..
here is a working fiddle http://jsfiddle.net/rameezrami/27754r4f/1/ or use following html
<html>
<head>
<style>
/* Firefox old*/
#-moz-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
/* IE */
#-ms-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
/* Opera and prob css3 final iteration */
#keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
.blink-image {
-moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation: blink normal 2s infinite ease-in-out; /* IE */
animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
</style>
</head>
<body>
<img class="blink-image" src="http://www.chicagoexcelclasses.com/wp-content/uploads/2014/04/css31-180x180.jpg">
</body>
</html>
Related
I am trying to spin a null set image but my code is not working.
If I ran on my own computer, the picture goes black and spin.
What is the problem?
#-webkit-keyframes rotate {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
#refresh {
width:48px;
height:48px;
position:fixed;
top:150px;
right:150px;
background:url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif);
-webkit-animation: rotate 2s linear infinite;
}
<div id="refresh" ></div>
http://jsfiddle.net/Pg2pj/
It seems to work just fine. Here: http://cssdesk.com/6VyMM
I updated your FIDDLE, have a look.
Hope this can help you
You can also use percent in your animation instead of from and to
CSS:
#-webkit-keyframes rotate {
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
#refresh {
width: 48px;
height: 48px;
top: 0px;
right: 0px;
background: grey url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif) no-repeat;
background-size: 100% 100%;
-webkit-animation: rotate 2s linear 0s infinite;
}
Remember for cross-browser compatibility:
#-webkit-keyframes rotate {
0% { }
100% { }
}
#-moz-keyframes rotate {
0% { }
100% { }
}
#-o-keyframes rotate {
0% { }
100% { }
}
#keyframes rotate {
0% { }
100% { }
}
#refresh {
-webkit-animation: rotate 2s linear 0s infinite /* Safari 4+ */
-moz-animation: rotate 2s linear 0s infinite /* Fx 5+ */
-o-animation: rotate 2s linear 0s infinite /* Opera 12+ */
animation: rotate 2s linear 0s infinite /* IE 10+ */
}
Is it possible to change the background color of <p> element after few seconds ( 10 to 20 seconds ) using css fiddle? I don't want to use js.
<p style="background:#E1FEE0;">Human</p>
Using a CSS animation, you could just jump from 99.9% to 100%. Just set the initial background color (#E1FEE0) within 99.9%, then the final background color within 100%. If you want the color to transition, just increase the gap and use something like 80% for example.
Example Here
p {
display: inline;
animation: background-fade 10s forwards;
}
#keyframes background-fade {
99.9% {
background:#E1FEE0;
}
100% {
background:#000;
}
}
Other vendor prefixes omitted for simplicity and brevity.
Actually You can.
You should use CSS animation to achieve this.
Here's example of CSS declaration:
#-webkit-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#-moz-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#-o-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
.animated {
-webkit-animation: change-color 2s infinite; /* Safari 4+ */
-moz-animation: change-color 2s infinite; /* Fx 5+ */
-o-animation: change-color 2s infinite; /* Opera 12+ */
animation: change-color 2s infinite; /* IE 10+ */
}
Try this on JSFiddle.
For more reading, here's the link about CSS animations.
we have this h1 here
<h1 class="in">hello</h1>
and css for this is
.in{
-webkit-animation:mymove1 3s 1;
}
.in:hover {
-webkit-animation:nextT 3s 1;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes "mymove1"
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
#-webkit-keyframes "nextT"
{
0% {
-webkit-transform:scale(1);
}
100% {
-webkit-transform:scale(1.2);
}
}
so onload animation work properly and when i hover it grows up that's what i want but when i remove my mouse from the h1 the "mymove1" animation start again. i cloud not understand why this is happening help me out.you can also check the code working on
jsFiddle
Heres the code if you want it to change opacity on pageload & resize when you hover without the 'mymove1' animation restarting.
<style>
.in{
animation:mymove1 3s 1;
transform:scale(1);
/*If You want the hover to ease in and out*/
transition:transform 1s ease-in-out 0s;
}
.in:hover {
transform:scale(1.2);
}
#keyframes mymove1
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
</style>
I've made my backgrounds fade in with CSS3 here: http://www.cphrecmedia.dk/musikdk/stage/artistchannel.php
It works fine, but not in Firefox (newest beta).
The funny thing though is that my small pulse animation works fine:
http://www.cphrecmedia.dk/musikdk/stage/chat.php
So it seems its the opacity-animation which wont work.
This is my code:
.fadeIn{
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
Anyone who knows whats wrong?
I added all the prefixes and still not working ?
It is like a slideshow that uses css to change the background to different images.
I don't understand what the problem is I looked everything over like 100 times.
You can see it on http://steveedwin.com/
html{
max-width:1000px;
}
#slideshow{
background-image: url('1.jpg') ;
background-repeat:no-repeat;
background-size: 70% 350px;
width:100%;
height: 300px;
animation:myfirst 30s linear 1s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 30s linear 1s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 30s linear 1s infinite alternate;
/* Opera: */
-o-animation:myfirst 30s linear 1s infinite alternate;
}
#keyframes myfirst
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}
#-moz-keyframes myfirst /* Firefox */
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}
#-o-keyframes myfirst /* Opera */
{
0% {background-image:url('1.jpg');}
5%{background-image:url('1.jpg');}
10%{background-image:url('1.jpg');}
15%{background-image:url('1.jpg');}
20%{background-image:url('5.jpg');}
25%{background-image:url('5.jpg');}
30%{background-image:url('5.jpg');}
40%{background-image:url('5.jpg');}
45%{background-image:url('2.jpg'); }
50%{background-image:url('2.jpg'); }
55%{background-image:url('2.jpg'); }
60%{background-image:url('2.jpg'); }
70%{background-image:url('3.jpg');}
75%{background-image:url('3.jpg');}
80%{background-image:url('3.jpg');}
85%{background-image:url('4.jpg');}
90%{background-image:url('4.jpg');}
95%{background-image:url('4.jpg');}
100%{background-image:url('4.jpg');}
}