I use a class, that make a picture rotate.
This class looks like that
.zodiac_rotate {
-webkit-animation:spin 15s linear infinite;
-moz-animation:spin 15s linear infinite;
animation:spin 15s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
I also tried to do that rotate using jquery but in css I've seen that it is more fluid so I decided to do it in css only.
Now, using jquery I would like to stop the rotate when the mouse is over the picture. I did a small javascript and it works fine :
$('#zodiac').hover(function(){
$(this).removeClass('zodiac_rotate');
},function(){
$(this).addClass('zodiac_rotate');
})
The trouble I have is with the position, I would like that when we mouse over the image, it stay at its position, when I remove the class, it goes like the original position, so the effect is not so fine.
Anykind of help will be much appreciated.
You could use animation-play-state for that
$('#zodiac').on('mouseover', function () {
$(this).css('-webkit-animation-play-state','paused');
$(this).css('animation-play-state','paused');
});
$('#zodiac').on('mouseout', function () {
$(this).css('-webkit-animation-play-state','running');
$(this).css('animation-play-state','running');
})
JSFiddle
Do rotate with jquery something like this:
$('#zodiac').hover(function(){
$(this).css('transform','rotate(0deg)');
});
Related
I'm trying to animate an element to slowly move from left to right a small distance and do it in a smooth way but the result is not very good.
Here is what I have so far:
.animate_sideways{animation:sideways 5s linear infinite; animation-timing-function: ease-in, ease-in-out;};
#keyframes sideways {
50% {
transform: translateX(30px);
}
100% {
transform: translateX(-30px);
}
}
I think the problem is related to the missing start point in the keyframes for the transform attribute.
A minor tweak to your code should correct the issue.
A different animation-timing-function value or time frame (less that 5s for example) may suit you better as well.
.contain { width:100% }
.animate_sideways {
width:40px;
height:40px;
background:#482;
animation:sideways 5s linear infinite;
animation-timing-function:ease-in, ease-in-out;
}
#keyframes sideways {
0% { transform: translateX(-30px) }
50% { transform: translateX(30px) }
100% { transform: translateX(-30px) }
}
<div class="contain">
<div class="animate_sideways"></div>
</div>
In this website link an arrow is moving i want to know to how to set this effect in CSS
i have a code
-webkit-animation: new_icon 2s linear 0s infinite alternate;
But for the moment this dosnt work.
You need to declare your animation details for new_icon - see the code in the CSS file on the site you refrence. You'll need to change the ID names accordingly.:
#-webkit-keyframes new_icon {
0% { -webkit-transform: translate(0px, 5px) ; }
100% { -webkit-transform: translate(0px, -15px); }
}
#-moz-keyframes new_icon {
0% { background-position: 0 0; }
100% { background-position: 0 600%; }
}
#lp-pom-image-350, #lp-pom-image-472, #lp-pom-image-473, #lp-pom-image-474, #lp-pom-image-475{
animation: new_icon 1s linear 0s infinite alternate;
-webkit-animation: new_icon 2s linear 0s infinite alternate;
}
You need to set up a css animation. The following one should do the trick:
#-webkit-keyframes bounce {
50% {
-webkit-transform(translateY(-30px));
}
100% {
-webkit-transform(translateY(0px));
}
}
/* For firefox and others than webkit based browsers */
#keyframes bounce {
50% {
transform(translateY(-30px));
}
100% {
transform(translateY(0px));
}
}
And then add this to the arrow class:
.your_arrow_class
{
-webkit-animation: bounce 2s linear 0s infinite alternate;
animation: bounce 2s linear 0s infinite alternate;
}
its because you would also need the animation set.
in this case the animation is called:
new_icon
for further information how it works read this about css3 animations
the new_icon animation would probably look like this:
so add this to your css ( don't forget to prefix it) and it should work.
#keyframes new_icon {
0% { top: 275px; }
100% { top: 300px; }
}
greetings timmi
Right now I am using Rico St.Cruz brillant working query.transit library but now I have to change some things to do with classes instead though not being this firm in CSS transitions. I tried to
replace:
JS:
$("#target_element").mouseenter( function() {
$("#arr_left")
.transition( { x: 3 }, 300, 'easeOutSine' )
.transition( { x: 0 }, 300, 'easeInSine' );
};
}
with:
JS:
$("#target_element").mouseenter( function() {
$("#arr_left").addClass('hint');
}
CSS:
#arr_left.hint {
-webkit-animation: hint_left 600ms;
-moz-animation: hint_left 600ms;
-o-animation: hint_left 600ms;
animation: hint_left 600ms;
}
#keyframes hint_left {
0%, 100% {
-webkit-transform: translate(0);
-moz-transform: translate(0);
-o-transform: translate(0);
transform: translate(0);
-webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine */
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
50% {
-webkit-transform: translate(3px);
-moz-transform: translate(3px);
-o-transform: translate(3px);
transform: translate(3px);
-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); /* easeInSine */
animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715) ;
}
}
but this new code does not work.
1) What I am doing wrong here?
2) What is the shortest code (browser compatible) to reach this?
Addition: I’d like to keep the "hint" class generic to address via JS with each arrow has a specific own translation property. Thanks so much in advance!
EDIT:
http://jsfiddle.net/bg7w6jmh/61/
I added a fiddle. Note: I need the extra container for the arrow because it’s animated (rotated) in other places.
The aim is to make the little arrow smoothly move to the left 3px and back in to indicate the target_element being animated on click or swipe. For the values and easing see the keyframes. Thanks for help!
Happens to be ok now. While I was working endlessly on my fiddle I recognized that I missed a round bracket at the end of my event declaration…
There is several questions about how to rotate an image, but I want an animation-like rotating. By an
event (tap) I would like to rotate an image with -5 degree then with 5 degree, but if I write both rotating in
the same function (or eventhandler), the first rotate doesn't appear only the second is visible.
$("#imgdiv").on('taphold', function(e){
//$("#imageID").addClass("swing animated");
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(-5deg)"});
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(5deg)"});
//$("#imageID").removeClass("swing animated");
});
I have also tried a swing animation with classes (addClass, then removeClass), but with the same result:
#keyframes swing {
25% { transform: rotate(-5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.swing {
transform-origin: top center;
animation-name: swing;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
You may put the second animation in a setTimeout in order to delay its animation until the first one finishes.
You can also put your transition in the css rather than in JS. Just place the transform value in JS.
Try something like this SAMPLE.
JS:
$(".clickme").click(function(){
//animate to -5deg
$(this).css('transform','rotate(-5deg)');
//animate to 5deg
setTimeout(function(){$(".clickme").css('transform','rotate(5deg)')},1000);
//animate back to root position
setTimeout(function(){$(".clickme").css('transform','rotate(0deg)')},2000);
});
you can do with addclass and removeclass, but there is one mistake in your code.
you are doing addclass and removeclass at the same time. so, animation is not happening or only one time happens
so try setTimeout:
$("#imgdiv").on('click', function(e){
$("#imageID").addClass("swing animated");
setTimeout(function(){
$("#imageID").removeClass("swing animated");
},1000)
});
i have done that in jsfiddle - http://jsfiddle.net/tqn394k9/
I have a function that checks mail on every 10 secods, if there is a new email, it make a bubble notification and show the total number of mail.
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
It animates the bubble, first time I load the page, but this function is set on an interwal, so it should animate the bubble each time there is new mail, but it Doesn't
My animation and other functions are perfect.. it is just it Doesn't animate when it is being called in set interval. it ads the number of total mail.. but no animation.
Please help me.
Regards
Added
This is animating class and css
.animating{
-webkit-animation: animate 1s cubic-bezier(0,1,1,0);
-moz-animation: animate 1s cubic-bezier(0,1,1,0);
-ms-animation: animate 1s cubic-bezier(0,1,1,0);
-o-animation: animate 1s cubic-bezier(0,1,1,0);
animation: animate 1s cubic-bezier(0,1,1,0);
}
#-webkit-keyframes animate{
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(1.7);
}
}
#-moz-keyframes animate{
from {
-moz-transform: scale(1);
}
to {
-moz-transform: scale(1.7);
}
}
#-ms-keyframes animate{
from {
-ms-transform: scale(1);
}
to {
-ms-transform: scale(1.7);
}
}
#-o-keyframes animate{
from {
-o-transform: scale(1);
}
to {
-o-transform: scale(1.7);
}
}
#keyframes animate{
from {
transform: scale(1);
}
to {
transform: scale(1.7);
}
}
You'll need to remove the class once the animation is completed, and re-add it once you'll need to use it again.
setInterval(function() {
$("#bubble_mate").addClass('animating');
setTimeout(function() {
$("#bubble_mate").removeClass('animating');
}, 1000); // This is the time specified in your CSS
}, 3000); // Example interval time
JSFiddle.
If you are using keyframe animations, you may want to remove the class, then wait 1 ms and re-add the class. Adding the class multiple times will not animate it multiple times.
$('#test').addClass('animated');
setInterval(function(){
$('#test').removeClass('animated');
setTimeout(function(){
$('#test').addClass('animated')
}, 1);
}, 3000);
Will give the test element the class 'animated', which will start the animation, and every 3 seconds, it will remove the class, pause for 1 ms, then re-add it, which will restart the animation.
Source: http://jsfiddle.net/jcolicchio/eV7ET/
To show the slide down effect you have first to hide the div!
$("#simulate").on("click", function() {
console.log("mail in");
$("#bubble_mate").text("10 new mail");
$("#bubble_mate").addClass('animating').hide();
$("#bubble_mate").slideDown(500);
});
try on this fiddle
http://jsfiddle.net/jQmJr/32/
Try:
jQuery("#bubble_mate").hide().show('normal');
I resolved it myself..
in beforeSend function i added this:
beforeSend:function (){
jQuery("#bubble_mate").removeClass('animating');
},
and then on success:
success:function(responseText)
{
if(responseText.mails=='yes')
{
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
}
}
I used the webkitEndAnimation event to remove the animated class and the end of the animation.
Here is the live example
Code:
$(document).ready(function(){
setInterval(function(){
$('#test').show().addClass('animated');
}, 3000);
$('#test').on('webkitAnimationEnd', function () {
$(this).removeClass('animated').hide();
});
});
If this works for you should think of a way to get the correct event name depending on the users browser