I have this PNG:
http://imgur.com/DbVFiyW
And I'm trying to make an animation with this png through CSS, I want the images to crossfade so it creates the illusion of only the petals fading in. For now the images do change correctly, but I have no idea how to make the new petals fade in. At this point I'll accept any approach with Javascript/jquery, although css only would be perfect.
This is my Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Sprite Animation</title>
</head>
<style type="text/css">
#spriteContainer {
width: 700px;
height: 507px;
display: block;
background-image: url("karuna_animation.png");
animation: sprite 3s steps(12) infinite;
}
#keyframes sprite {
100% {
background-position: -8520px;
}
}
</style>
<body>
<div id="spriteContainer"></div>
</body>
</html>
Maybe you could use several divs with different opacities?
.spriteContainer {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 507px;
display: block;
background-image: url("http://i.imgur.com/DbVFiyW.png");
animation: sprite 3s steps(12) infinite;
}
#spriteContainer1 {
opacity: 0.3;
animation-delay: 0.08s;
}
#spriteContainer2 {
opacity: 0.6;
animation-delay: 0.16s;
}
#spriteContainer3 {
opacity: 1;
animation-delay: 0.24s;
}
HTML:
<div id="spriteContainer1" class="spriteContainer"></div>
<div id="spriteContainer2" class="spriteContainer"></div>
<div id="spriteContainer3" class="spriteContainer"></div>
jsfiddle
Maybe a way to do the fadeIn is to cut your sprite as many pictures you have with petals and then use a function in jQuery to fade them ?
So you will have a structure like this :
<div id="spriteContainer">
<img src="yourFirstPetal" alt="1st-petal" />
<img src="yourSecondPetal" alt="2nd-petal" />
<!-- and so on -->
</div>
And in CSS, you position your images in absolute position, one above the precedent one and play with fadeIn() and fadeOut() to show them with jQuery (or CSS but I don't know the method) ?
See an example of what I'm meaning here
Related
I have an image that I animated with CSS. It goes from -200px left to 2100px right and then starts over. What I want to do is when part of the image is disappearing to the right, I want that part to show on the left side and continue the animation.
Here is an example of what I want, you can see how part of the text that goes off-screen to the right reappears left and continues the animation. I want to do the same thing with CSS or JS.
Part of my code right now (I made it small - don't view full screen):
body {
background-color: pink;
width: 400px;
height: 200px;
}
.box {
position: absolute;
bottom: 50px;
left: 0px;
width: 200px;
height: 100px;
background-color: black;
animation: animate 5s linear infinite;
}
#keyframes animate {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(310%);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>
I want to display a gif on site load and then have it change to looping gif afterward. I tried searching StackOverflow with no luck. Any direction on how to achieve this would be appreciated.
Below are the two animated icons I created. Their classes distinguish which one is on load and which one is looping.
.on-load-gif, .looping-gif{
max-width: 335px;
position: absolute;
top: 0;
left: 0;
}
.on-load-gif{
opacity: 1;
animation: fadeInAnimation ease 3s
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 2s;
}
#keyframes fadeInAnimation {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Loop</title>
</head>
<body>
<img src="https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Animation-for-Rossetti-on-load.gif" class="on-load-gif"alt="" />
<img src="https://rossettibev.wpengine.com/wp-content/uploads/2020/08/r-animation.gif" class="looping-gif" alt="" />
</body>
</html>
I have a custom button (code below). I want it to:
rotate quickly 360 on mouseenter (currently working fine)
fade quickly to a darker image on mouseenter (also currently working fine)
NOT un-rotate on mouseleave (currently working fine)
I can't yet figure out how to:
fade back to the original image on mouseleave (not working yet)
I have tried so many variations of jQuery including .hover, .fadeToggle, fadeIn, fadeOut as well as animate but none have seemed to work for me.
Am I missing something really simple and obvious?
NOTE: I have just used the Apple logo for demonstration here. If I can get the 'fade back on mouseleave' working I can just transfer it to my real life situation.
var thevalue = 1;
$("div.main").mouseenter(function() {
thevalue = thevalue + 1;
if (thevalue % 2 == 0) {
$(this).addClass("myopacity");
} else {
$(this).removeClass("myopacity");
}
$(this).addClass("change").delay(500).queue(function() {
$(this).removeClass("change").dequeue();
});
});
div.main {
width: 100px;
height: 100px;
}
div.main img {
width: 100%;
height: 100%;
}
.change {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: .5s;
}
.myopacity {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
</body>
</html>
Thanks in advance!
is this what you want. hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.main{
width: 100px;
height: 100px;
}
div.main img{
width: 100%;
height: 100%;
}
.change{
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: 5s;
}
</style>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
<script type="text/javascript">
var thevalue = 1;
$("div.main").mouseenter(function(){
$(this).addClass("change").fadeTo('fast',0.7).delay(5000).queue(function(){
$(this).removeClass("change").fadeTo('slow',1.0).dequeue();
});
});
</script>
</body>
</html>
I'm not 100% certain what you are after... I think this is close. Rotates 360° and opacity dims to 60%, then rotates back to 0° and full opacity.
No clue why you even needed the opacity class or the associated jQuery for it.
$("div.main").hover(
function() {
$(this).addClass('change').addClass('myopacity');
},
function() {
$(this).removeClass('myopacity')
});
body { padding: 40px; }
div.main {
width: 100px;
height: 100px;
opacity: 1;
transition: all .5s;
transition: all .5s;
background: url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg) no-repeat center center;
background-size: cover;
}
div.main img {
width: 100%;
height: 100%;
}
.main.change {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
transition: all .5s;
background: url(https://image.freepik.com/free-icon/windows-8-logo_318-40228.jpg) no-repeat center center;
background-size: cover;
}
.change.myopacity {
opacity: .6; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
</div>
<p id="dis"></p>
</body>
</html>
If you want the images in the actual HTML, then you can use the jQuery hover function to alter the image sources.
Found it.
Trying to manage two transitions on the exact same element was making it too complicated.
I ended up having to add one class to the img element and another to the div element. The img element now manages the rotation and the div element manages the fade through simple CSS :hover transitions.
This makes the jQuery much more simple.
See updated code below:
$("div.main").mouseenter(function() {
$(".image").addClass("change").delay(500).queue(function() {
$(".image").removeClass("change").dequeue();
});
});
// jQuery now much more simple. No need for variables or the if/else statement
div.main {
width: 100px;
height: 100px;
-webkit-transition: all .5s ease-in;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-in;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-in;
-o-transition: all .5s ease-out;
}
/* This will take care of the fade transition on :hover */
div.main img {
width: 100%;
height: 100%;
}
.change {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: .5s;
}
/* .myopacity {
opacity: 0.6;
} */
/* The .myopacity class is no longer necessary as it's taken care of through the div.main:hover class below */
div.main:hover, div.main:active, div.main:focus {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" class="image">
</div>
<p id="dis"></p>
</body>
</html>
Kind of cheated with not using jQuery for the fade transition (as originally hoped for) but this works equally as well!
i am trying to make "memory game" using html5, CSS3 and JS. I have completed the view and model part of this game and now trying to make the Controller. What i want is call a function i.e. flip in JS and want that function to perform transition instead of using hover effect of CSS3. Basically i am trying to follow this approach. I checked that flipping in css3 using hover as can be seen in sass code below, but for the game, the user decides where to click. For simplicity, i have concised the code in html5 since it repeats for all other divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
and the SASS code for css
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
and JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
Note: the link, above, is trying to pass id to JS function where the transition takes place. Exactly same is being done here, just to get input from user instead of just hovering, but nothing happens! I copy/pasted the link code in my editor and smooth transitions are performed but when it comes of my code, nothing! Could you tell me where is my flaw?
Change your CSS from the hover state to a class, for iunstance change .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
And now, on click, add this class to the element clicked:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
fiddle
this function in javascript would be
function change(element) {
element.className = element.className + " hovered";
}
provided that you send the element in the function call
onclick="change(this)"
fiddle - function set only in the first div
I want to move div when every click to change_photo button but this code run only one time ,I don't need infinite loop ,i want div moves when every click.
this is css:
<style>
#-webkit-keyframes myfirst
{
0% {left:0px}
100% {left:100%}
}
#images {
width: 1000px;
height: 300px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#im{ position:relative;}
</style>
this is html code:
<div id="images" style="">
<img id="im" src="images/banner.jpg"
style="width: 833px; height: 179px;" />
</div>
<input type="button" value="change_photo" onclick="animate();" />
</div>
<script>
function animate() {
var im = document.getElementById("im");
im.style.webkitAnimation = "myfirst 3s";
}
</script>
Use css3 transitions-
#image{
-webkit-transition:all 2s;
}
#image:hover{
left:100px;
}
Remove Javascript and the keyframes rule and this will work
EDIT:
jsfiddle using jquery.animate()
#-webkit-keyframes myfirst
{
0% {left:0}
50% {left:100%}
100% {left:0}
}