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 try to make an animation that run every 3 seconds without JavaScript. My animation's duration is 1 second.
I'm only able to wait 3seconds the first occurence then it's a loop of 1s animation.
My code so far: https://jsfiddle.net/belut/aojp8ozn/32/
.face.back {
-webkit-animation: BackRotate 1s linear infinite;
-webkit-animation-delay: 3s;
animation: BackRotate 1s linear infinite;
animation-delay: 3s;
}
.face.front {
-webkit-animation: Rotate 1s linear infinite;
-webkit-animation-delay: 3s;
animation: Rotate 1s linear infinite;
animation-delay: 3s;
}
#-webkit-keyframes Rotate {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
#-webkit-keyframes BackRotate {
from {-webkit-transform:rotateY(180deg);}
to {-webkit-transform:rotateY(540deg);}
}
#keyframes Rotate {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
#keyframes BackRotate {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
I know how to do it with javascript: https://jsfiddle.net/belut/fk3f47jL/1/
I tried this answer without success: Cycling CSS3 animation with a pause period?
Can you help me please?
EDIT
Thanks great answers i'm also able to make this scenario:
wait 2s, run 1s flip, wait 2s, run 1s back_flip, wait 2s.
#f1_container {
position: relative;
margin: 10px auto;
width: 90px;
height: 90px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
}
img {
width: 90px;
height: 90px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
}
.face.back {
-webkit-animation: BackRotate 5s linear infinite;
}
.face.front {
-webkit-animation: Rotate 5s linear infinite;
}
#-webkit-keyframes Rotate {
0%,40% {-webkit-transform:rotateY(0deg);}
50%,90% {-webkit-transform:rotateY(180deg);}
100% {-webkit-transform:rotateY(360deg);}
}
#-webkit-keyframes BackRotate {
0%,40% {-webkit-transform:rotateY(180deg);}
50%,90% {-webkit-transform:rotateY(360deg);}
100% {-webkit-transform:rotateY(540deg);}
}
It seems like the only way to achieve this is to extend the animation so that it lasts 4s instead of 1s. Then you could delay the animation by animating from 75% to 100% (rather than 0% to 100%).
In doing so, there is essentially an artificial delay in the animation itself. You just have to do the math to figure out how long this delay is in correlation with the total length of the animation itself.
Updated Example
.face.back {
display: block;
transform: rotateY(180deg);
}
.face.back {
-webkit-animation: BackRotate 4s linear infinite;
animation: BackRotate 4s linear infinite;
}
.face.front {
-webkit-animation: Rotate 4s linear infinite;
animation: Rotate 4s linear infinite;
}
#-webkit-keyframes Rotate {
75% {-webkit-transform:rotateY(0deg);}
100% {-webkit-transform:rotateY(360deg);}
}
#-webkit-keyframes BackRotate {
75% {-webkit-transform:rotateY(180deg);}
100% {-webkit-transform:rotateY(540deg);}
}
#keyframes Rotate {
75% {-webkit-transform:rotateY(0deg);}
100% {-webkit-transform:rotateY(360deg);}
}
#keyframes BackRotate {
75% {-webkit-transform:rotateY(180deg);}
100% {-webkit-transform:rotateY(540deg);}
}
I am not sure exactly when it was released, and it's not the most cross-browser approach (does not cover older browsers like I.E. 9) but you could use the animationPlayState style prop. Theres some documentation on this found here if you want to check it out.
animationPlayState=false
webkitAnimationPlayState=false
function pause() {
var animationElement = document.getElementById('animatedItem');
animationElement.style.animationPlayState='paused';
animationElement.style.webkitAnimationPlayState='paused';
}
As you can see this put's the items animation into a "paused"state, to put it back where it left the animation off at, you can set it to the "running" state that this prop accepts.
Here is a quick example I found when browsing Google.
I was able to do this, as #Josh mentioned, by extending the animation. For example, if you want your animation to last 0.5 seconds with a 3 second pause, you make the entire animation 3.5 seconds, and then use percentages to extend it. (0.5 seconds is about 14% of 3.5 seconds.)
In the code below, I created a DIV with transparent gradient that is the same width as the parent, and then animated it from left to right to give a shimmer effect.
.shimmer {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* W3C */
background-repeat: repeat-y;
background-size: 30% 100%;
left: -100%;
z-index: 101;
animation-name: shine;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes shine {
0% { left: -100%; }
14% { left: 100%; }
100% { left: 100%; }
}
From 14% to 100%, the DIV doesn't move, but the animation continues for additional time, giving the effect of a pause.
You can add an ending state in the animation which will play like a delay. Check the example below, simple animation that runs for 4 sec but the last 3 sec is delayed.
body {
perspective: 500px;
}
/* clear background */
h2 {
text-align: center;
padding: 16px;
margin: 0;
}
/* crops animations that exceeds one line area */
.line {
width: 100%;
height: 4rem;
overflow: hidden;
padding: 0;
margin-bottom: 16px;
}
/* flipping class and key frames*/
.flipX {
animation: 4s anim-flipX ease infinite;
}
#keyframes anim-flipX {
0% {
opacity: 0;
transform: rotateX(9def);
}
20% {
/* animate nothing to pause animation at the end */
opacity: 1;
transform: rotateX(360deg);
}
60% {
/* animate nothing to pause animation at the end */
opacity: 1;
transform: rotateX(360deg);
}
100% {
/* animate nothing to pause animation at the end */
opacity: 1;
transform: rotateX(360deg);
}
}
<body>
<div class='line'>
<h2 class='flipX'>flip vertical</h2>
</div>
</body>
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.
I have a background image that has an arrow that points to the right. When a user clicks on the button, the selected state changes the arrow to point down (using a different background position in my image sprite).
Is there anyway to animate this using CSS3 so once the button is clicked and jQuery assigns it a "selected" class, it will rotate in an animation (only 90 degrees) from the right to down? (preferably using the single image/position with the arrow that points to the right)
I'm unsure as to whether transform or key animation frames need to be used.
you could use the ::after (or ::before) pseudo-element, to generate the animation
div /*some irrelevant css */
{
background:-webkit-linear-gradient(top,orange,orangered);
background:-moz-linear-gradient(top,orange,orangered);
float:left;padding:10px 20px;color:white;text-shadow:0 1px black;
font-size:20px;font-family:sans-serif;border:1px orangered solid;
border-radius:5px;cursor:pointer;
}
/* element to animate */
div::after /* you will use for example "a::after" */
{
content:' ►'; /* instead of content you could use a bgimage here */
float:right;
margin:0 0 0 10px;
-moz-transition:0.5s all;
-webkit-transition:0.5s all;
}
/* actual animation */
div:hover::after /* you will use for example "a.selected::after" */
{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
HTML:
<div>Test button</div>
in your case you will use element.selected class instead of
jsfiddle demo: http://jsfiddle.net/p8kkf/
hope this helps
Here is a rotating css class that I have used to spin a background image:
.rotating {
-webkit-animation: rotating-function 1.25s linear infinite;
-moz-animation: rotating-function 1.25s linear infinite;
-ms-animation: rotating-function 1.25s linear infinite;
-o-animation: rotating-function 1.25s linear infinite;
animation: rotating-function 1.25s linear infinite;
}
#-webkit-keyframes rotating-function {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotating-function {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes rotating-function {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-o-keyframes rotating-function {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotating-function {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}