Firefox is ignoring the declaration for the first animation (cursorfadein), while showing the animations that handle the moving and fading out just fine. I've tried using units like 0s and 0msCode below.
#-moz-keyframes cursorfadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes cursormover {
0% {
top: 300px;
right: 90px;
}
50%, 60% {
top: 204px;
right: 234px;
}
100% {
top: 300px;
right: 290px;
}
}
#-moz-keyframes cursorhider {
0% { opacity: 1; }
100% { opacity: 0; }
}
.cursor {
position: absolute;
background: url(https://cdn.mediacru.sh/A/AhRlh9cYN5sf.png) no-repeat;
background-size: contain;
display: block;
height: 20px;
width: 20px;
-webkit-animation: cursorfadein 3s ease 0s, cursormover 3s ease-in-out 2s both, cursorhider 1s linear 6s both;
-moz-animation: cursorfadein 3s ease 0s, cursormover 3s ease-in-out 2s both, cursorhider 1s linear 6s both;
animation: cursorfadein 3s ease 0s, cursormovein 3s ease-in-out 2s both, cursorhider 1s linear 6s both;
}
I have the -webkit- and non-prefixed #keyframes as well (included in the Codepen), just wanted to be brief here on SO
Codepen here.
Related
Im trying to create a blink effect by using 2 images.
I have 2 photos with a person, one with eyes opened and another with eyes closed. How can i make a blinking effect?
I was hoping to make it as real as possible, trying to blink quickly and then keep the eyes opened for 3-5sec and then blink in 1sec.
Found one example that is almost what i need but not quite yet
Would really appreciate some help
.imageswap {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
.imageswap img {
position:absolute;
left:0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
object-fit: contain;
width: 100%;
height: 100%;
}
#-webkit-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-o-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
img.openeyeimg {
-webkit-animation: blink 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 5s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 5s;
-o-animation-iteration-count: infinite;
}
<div class="imageswap">
<!-- NOTE: both images should be have same dimension, look&feel -->
<img src="https://i.stack.imgur.com/yqWK7.jpg" class="closeeyeimg">
<img src="https://i.stack.imgur.com/NgW24.jpg" class="openeyeimg">
</div>
I have made this loader bar. Is it possible that when I remove the class "animate" to wait the animation to end?
Or just make the bar fade out (it should now but the animation stops).
I thought to let the animation run continuously and fade the bar's colours but i don't like to leave an animation always running....
I don't really like that it just disappears :(
$("#btn").click(function() {
$(".loadBar").addClass("animate");
setTimeout(function() {
$(".loadBar").removeClass("animate");
}, 5000)
})
#btn {
margin-top: 50px;
}
.loadBar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: transparent;
z-index: 4;
opacity: 0;
-moz-transition: opacity ease-in 1s;
-o-transition: opacity ease-in 1s;
-webkit-transition: opacity ease-in 1s;
transition: opacity ease-in 1s;
}
.loadBar .bar {
content: "";
display: inline;
position: absolute;
width: 0;
height: 100%;
left: 50%;
text-align: center;
-moz-transition: left 2s 2s;
-o-transition: left 2s 2s;
-webkit-transition: left 2s 2s;
transition: left 2s 2s;
}
.loadBar .bar:nth-child(1) {
background-color: #4183D7;
}
.loadBar .bar:nth-child(2) {
background-color: #FFF;
}
.loadBar .bar:nth-child(3) {
background-color: #FFF;
}
.loadBar.animate .bar {
-moz-transition: left 0s 0s;
-o-transition: left 0s 0s;
-webkit-transition: left 0s 0s;
transition: left 0s 0s;
}
.loadBar.animate .bar:nth-child(1) {
-moz-animation: loading 1.5s infinite;
-o-animation: loading 1.5s infinite;
-webkit-animation: loading 1.5s infinite;
animation: loading 1.5s infinite;
}
.loadBar.animate .bar:nth-child(2) {
-moz-animation: loading 1.5s 0.5s infinite;
-o-animation: loading 1.5s 0.5s infinite;
-webkit-animation: loading 1.5s 0.5s infinite;
animation: loading 1.5s 0.5s infinite;
}
.loadBar.animate .bar:nth-child(3) {
/* -moz-animation : loading 3s linear 2s infinite;
-o-animation : loading 3s linear 2s infinite;
-webkit-animation: loading 3s linear 2s infinite;
animation : loading 3s linear 2s infinite;*/
}
.loadBar.animate {
opacity: 1;
}
#-moz-keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
#-webkit-keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
#keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loadBar">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<button id="btn">Show loadbar</button>
Well currently your animation doesnt end...
animation: loading 1.5s 0.5s infinite;
so lets fix that by making it iterate 1 time:
animation: loading 1.5s 0s 1;
Because its one iteration and no delay the overall animation runtime is 1500ms...so you set the timeout to 1500ms like so...
EDIT: Because you also specified (in the comments to this answer) that you would want the animation to continue until ajax has loaded I have amended my code to do so
$("#btn").click(function() {
doajax();
})
function doajax() {
$(".loadBar").addClass("animate");
//every 1500ms check if ajax has done loading
setInterval(function() {
if ($(".loadBar").hadClass("page-loaded")) {
$(".loadBar").removeClass("animate");
}
}, 1500);
$.ajax({
url: "http://www.mypage/",
type: "POST",
data: "",
success: function(data) {
$(".loadBar").addClass("page-loaded");
}
});
}
#btn {
margin-top: 50px;
}
.loadBar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: transparent;
z-index: 4;
opacity: 0;
-moz-transition: opacity ease-in 1s;
-o-transition: opacity ease-in 1s;
-webkit-transition: opacity ease-in 1s;
transition: opacity ease-in 1s;
}
.loadBar .bar {
content: "";
display: inline;
position: absolute;
width: 0;
height: 100%;
left: 50%;
text-align: center;
-moz-transition: left 2s 2s;
-o-transition: left 2s 2s;
-webkit-transition: left 2s 2s;
transition: left 2s 2s;
}
.loadBar .bar:nth-child(1) {
background-color: #4183D7;
}
.loadBar .bar:nth-child(2) {
background-color: #FFF;
}
.loadBar .bar:nth-child(3) {
background-color: #FFF;
}
.loadBar.animate .bar {
-moz-transition: left 0s 0s;
-o-transition: left 0s 0s;
-webkit-transition: left 0s 0s;
transition: left 0s 0s;
}
.loadBar.animate .bar:nth-child(1) {
-moz-animation: loading 1.5s 2;
-o-animation: loading 1.5s 2;
-webkit-animation: loading 1.5s 2;
animation: loading 1.5s 2;
}
.loadBar.animate .bar:nth-child(2) {
-moz-animation: loading 1.5s 0.5s 2;
-o-animation: loading 1.5s 0.5s 2;
-webkit-animation: loading 1.5s 0.5s 2;
animation: loading 1.5s 0.5s 2;
}
.loadBar.animate .bar:nth-child(3) {
/* -moz-animation : loading 3s linear 2s infinite;
-o-animation : loading 3s linear 2s infinite;
-webkit-animation: loading 3s linear 2s infinite;
animation : loading 3s linear 2s infinite;*/
}
.loadBar.animate {
opacity: 1;
}
#-moz-keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
#-webkit-keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
#keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
50% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loadBar">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<button id="btn">Show loadbar</button>
1.So my animation is having a flag go down into the middle of the page and then disappearing, but the flag wont go down to the middle using top: 50% and left 50%, I want it to go to the middle by whatever size the browser is.
#-webkit-keyframes brazil-animation
{
0%
{
width : 200px;
height : 150px;
top : 0px;
left : 0px;
}
80% {
width: 200px;
height: 150px;
visibility: hidden;
opacity: 0.6;
}
100% {
width: 200px;
height: 150px;
top: 50%;
left: 50%;
visibility: hidden;
}
}
div.brazil,#brazil {
position: absolute;
-webkit-animation: brazil-animation 5s both 1s linear;
-moz-animation: brazil-animation 5s both 1s linear;
-ms-animation: brazil-animation 5s both 1s linear;
-o-animation: brazil-animation 5s both 1s linear;
animation: brazil-animation 5s both 1s linear;
-webkit-animation-delay: 3s;
}
Use transform or margin
#-webkit-keyframes brazil-animation{
80% {
visibility: hidden;
opacity: 0.6;
}
100% {
top: 50vh;
left: 50vw;
transform: translate3d(-100px,-75px,0);
/*margin: -75px 0 0 -100px;/*margin: height/2 0 0 width/2 but the animation will not be smooth*/
}
}
div.flag {
top:0;
left:0;
width : 200px;
height : 150px;
position: absolute;
background: red;
-webkit-animation: brazil-animation 5s both 3s linear;
}
<div class=flag></div>
Fullscreen demo
I am a novice.. I want to hover on the bottle and have the bottle rotate. At the same time I want to show the pouring and puddling animation. I don't know how I can get multiple animation to start with a single hover. Here is the CSS for it:
/*CSS ANIMATION*/
#-webkit-keyframes bottle {
0% {
height: 67px;
}
7% {
height: 67px;
}
95% {
height: 0px;
}
100% {
height: 0;
}
}
#-moz-keyframes bottle {
0% {
height: 67px;
}
7% {
height: 67px;
}
95% {
height: 0px;
}
100% {
height: 0;
}
}
#bottle {
position: absolute;
top: 1055px;
right: 490px;
-webkit-transition: all .2s linear;
}
#bottle:hover {
-moz-transform: rotate(165deg);
-webkit-transform: rotate(165deg);
transform: rotate(165deg);
-webkit-transition: all .2s linear;
}
#-webkit-keyframes pour {
0% {
background-position: 0 0;
height: 0;
}
5% {
background-position: 0 0;
height: 0;
}
10% {
background-position: 0 0;
height: 75px;
width: 4px;
}
95% {
background-position: 0 0;
height: 120px;
width: 4px;
}
100% {
background-position: 0 0;
height: 170px;
width: 4px;
}
}
#-webkit-keyframes puddle {
10% {
height: 30px;
}
15% {
height: 30px;
}
98% {
height: 50px;
}
100% {
height: 0;
}
}
#pour {
position: relative;
right: -55px;
top: -25px;
}
#puddle {
position: relative;
top: -50px;
opacity: 1;
right: -20px;
}
#contents1:hover {
-moz-animation: bottle 5s linear 1 forwards;
-webkit-animation: bottle 5s linear 1 forwards;
animation: bottle 5s linear 1 forwards;
}
#contents2:hover {
display: block;
-moz-animation: pour 2s linear 1;
-webkit-animation: pour 2s linear 1;
animation: pour 2s linear 1;
}
#contents3:hover {
-moz-animation: puddle 10s linear 1;
-webkit-animation: puddle 10s linear 1;
animation: puddle 10s linear 1;
}
Now I need to know how to connect contents2:hover and contents3:hover with the bottle:hover. I mean just by hovering over the bottle, how can I set contents2 and contents3 in motion?
As you guys have requested i ve uploaded everything to JSFiddle.. This is the link http://jsfiddle.net/shettyrahul8june/8tkKK/2/
And for fullscreen jsfiddle.net/shettyrahul8june/8tkKK/2/embedded/result/
For some reasons the bottle.png is not being displayed in the editors link but works fine in fullscreen.. This is the link for the image s26.postimg.org/s07bc6gvp/bottle.png .... All i want is to the bottle to rotate and pour the liquid and then comes the puddle.. All should happen with single bottle hover.. I'm not simply relying on people.. I've worked hard but couldn't get it right.. Also if someone could put light on how to maintain the resolution of the webpage, it'd be a great help.. Hope i am precise.. Please do help because many are searching for this and this could be their ultimate stop..
You are looking for Tilde ~ selector in CSS
Working Demo and Source
CSS
#bottle:hover ~ #pour {
display: block;
-moz-animation: pour 2s linear 1;
-webkit-animation: pour 2s linear 1;
animation: pour 2s linear 1;
}
#bottle:hover ~ #puddle {
-moz-animation: puddle 10s linear 1;
-webkit-animation: puddle 10s linear 1;
animation: puddle 10s linear 1;
}
So I found this
http://jsfiddle.net/simurai/CGmCe/
The code is easy enough and I was able to integrate into a page of mine. However when I go to make a 2nd animated sprite on the same page, it doesn't work because it seems that the code
-webkit-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-moz-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-ms-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-o-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
applies globally to all css animations and not specifically to the div labeled "hi"
It's really the TO position that needs to change per ID, any thoughts on how to put more than one?
When you use
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
you create a set of keyframes called play. The text after #keyframes is an identifier; in this case 'play' is just the name for this configuration. Then for an element you tell it what animation to use, and in your case you tell it to use the play set of frames.
In your fiddle your .hi element has the following animation:
animation: play .8s steps(10) infinite;
And here 'play' is just the identifier that is declared for the keyframes, and not a command to run the animation.
If you want to have more than 1 different animation, the way to go would be to use 2 different animations, and give them different identifiers (i.e. 'play' and 'animation2' or whatever).
For example, using the same sprite in your example:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
<div class="bye"></div>
And the CSS (note that I'm not using all the possible browser prefixes, and the animations are called longwave and shortwave):
.hi {
width: 50px;
height: 72px; border: 1px dashed red;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: longwave .8s steps(10) infinite;
animation: longwave .8s steps(10) infinite;
}
.bye {width: 50px; height: 72px; border: 1px dashed magenta;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: shortwave .8s steps(5) infinite;
}
#-webkit-keyframes longwave {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes longwave {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-webkit-keyframes shortwave {
from { background-position: -150px; }
to { background-position: -400px; }
}
#keyframes shortwave {
from { background-position: -150px; }
to { background-position: -400px; }
}
W3C spec. documents for animations (CSS Animations Module Level 3, Section 2)
More details in Mozilla's Developer Network animation totorial
Do you mean to control the animation separately for each object?
http://jsfiddle.net/CGmCe/1738/
If so, just create separate IDs for other DIVs
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
}
#hi1 {
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#hi2 {
-webkit-animation: play .4s steps(10) infinite;
-moz-animation: play .4s steps(10) infinite;
-ms-animation: play .4s steps(10) infinite;
-o-animation: play .4s steps(10) infinite;
animation: play .4s steps(10) infinite;
}
And HTML:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi" id="hi1"></div>
<div class="hi" id="hi2"></div>