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.
Related
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>
i am trying to set animation to an #Element, but animation is only working when I use "infinite" word:
animation: AnimationName 1s linear 0s infinite normal both !important;
it does not work when I use a number instead of "infinite"
I want to play only one time the animation.
I have tried with the next code too:
#Element
{
animation-name: ANIMATION !important;
animation-duration: .5s !important;
animation-iteration-count: infinite !important;
}
#-moz-keyframes ANIMATION {
0% { background: GREEN; }
100% { background: RED; }
}
#keyframes ANIMATION {
0% { background: RED; }
100% { background: GREEN; }
}
I use it on Firefox Nightly 22.0a1 (2013-03-23)
I'm trying to create a CSS3 sliding animation. The slideDown part works, but the going up part doesn't seem to trigger instantly and I can't figure out why.
.slideUp{
-webkit-animation:slideUpFrames 1s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes slideUpFrames{
0%{
max-height:1000px;
}
100%{
max-height:0px;
}
}
.slideDown{
-webkit-animation:slideDownFrames 1s;
-webkit-animation-fill-mode: forwards;
}
.slidable{
overflow: hidden;
}
#-webkit-keyframes slideDownFrames{
0%{
max-height: 0px;
}
100%{
max-height:1000px;
}
}
I've created a fiddle (webkit only): http://jsfiddle.net/5E7YQ/
How could I fix this?
The slideUp animation is triggering immediately you just can't see the first 940px of the animation, because your <ul class="slidable"> is only 60px tall.
So now that we know what's going on here's how it can be fixed:
Working Example
.slideUp {
-webkit-animation:slideUpFrames .5s; /* shorten time */
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes slideUpFrames {
0% {
max-height:60px; /* change 1000px to the height of the element */
}
100% {
max-height:0px;
}
}
.slideDown {
-webkit-animation:slideDownFrames .5s; /* shorten time */
-webkit-animation-fill-mode: forwards;
}
.slidable {
overflow: hidden;
}
#-webkit-keyframes slideDownFrames {
0% {
max-height: 0px;
}
100% {
max-height:60px; /* change 1000px to the height of the element */
}
}
Or if you would like you can shorten the whole thing and use .slideUp(); and .slideDown();
Working Example 2
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+ */
}
Let's say I have a simple element:
Click
Now I can change the look of this element on click via :active:
#btn:active {
background: red;
}
What I'd like however is that the element will stay red for about a second after I clicked it without altering the HTML (so no checkbox hack) or javascript. Is there a smart trick that can be abused for this?
JsFiddle here
Answering my own question. By abusing the :not pseudo class we can trigger an animation after a onclick happened:
#btn:not(:active) {
/* now keep red background for 1s */
transition: background-color 1000ms step-end;
}
#btn:active {
background: red;
}
You can use CSS3 animations and trigger with the :focus & :active...
Now, you can activate the effect with just pressing the TAB key...
But if you need to activate it with a mouse click.... and in a a tag you need to set the focus to the object, so some javascript is required. (inline in this case)
If you can use another object, let say an input type="text" then the focus it's automaticly set when you do the click, but in this case the focus action it's given by the browser.
So, the inline JS required is:
Click
And the CSS3 code
#btn {
background: yellow;
}
#btn:focus, #btn:active {
-webkit-animation: btn-color 1s forwards linear;
-moz-animation: btn-color 1s forwards linear;
-ms-animation: btn-color 1s forwards linear;
-o-animation: btn-color 1s forwards linear;
animation: btn-color 1s forwards linear;
}
#-webkit-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
#-moz-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
#-ms-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
#-o-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
#keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
See a working fiddle update: http://jsfiddle.net/s3G7p/1/