I am working on animate.css and i want to increase animation speed But there is delay time speed can be increase but after some delay but i don't want delay here are three parameters first is for delay other two's purpose ? -webkit-transform: translate3d(3000%, 0, 0)
#-webkit-keyframes slideInRight { 0% {
-webkit-transform: translate3d(3000%, 0, 0);
transform: translate3d(3000%, 0, 0);
visibility: visible; } 30% {
-webkit-transform: translate3d(3000%, 0, 0);
transform: translate3d(3000%, 0, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
#keyframes slideInRight { 0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible; }
30% {
-webkit-transform: translate3d(3000%, 0, 0);
transform: translate3d(3000%, 0, 0);
visibility: visible;
} 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; }
here is my code of css which i am using
Experts Please guide
Thanks
3 Parameters are translate3d(x,y,z)
Hey basically you want to speed up your animation right?
To speed up css3 animation you should decrease the animation duration if you want to slow down your animation you should increase the animation duration.
Animation delay is a different it is used to delay the animation starts.
Example:
#yourElement {
-vendor-animation-duration: 3s; /*This is the animation duration */
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
See This
Thank You.
Related
I'd like to code a review section with multiple boxes (one box per one person/review). There are 3 main elements that are visible, and 2 on each side that would be slightly off the page, but move in when hovered over.
Is anything like this possible ? Or should I make a carousel that would slide reviews all around to make it easier for myself?
You could consider using the CSS hover method to start an animation which brings the HTML element inward.
It might look something like this:
#keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
/* Credit to https://github.com/daneden for CSS animations */
review1:hover {
animation-name: slideInRight;
}
review2:hover {
animation-name: slideInLeft;
}
I have a paragraph that in my language says:
START A
NEW PROJECT
WITH US
I'd like to make this paragraph bounce. What's my best option here if I am not too advanced at coding? The current code used is:
<p><a href="linkhere">START ET<br>
<h4>NYT PROJEKT</h4><br>
MED OS</a></p>
By bounce I basically just mean some way of making the guy browsing the website notice it. There is stuff above and below it, so by it making some sort of a move it'd drag attention.
I know how to give the paragraph an ID, so for test purposes let's just assume the has the ID paragraphbounce.
This is the CSS I tried.
#keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
.paragraphbounce {
animation-name: tada;
}
https://jsfiddle.net/ss9tvwje/
/* The animation code */
#keyframes example {
0% {top:15px}
33% {top:30px}
66% {top:40px}
100% {top:15px}
}
.parent {
position: relative;
}
/* The element to apply the animation to */
div.bounce {
animation: example 4s infinite;
position:absolute;
top:15px;
left:15px;
}
From the sounds of it you want to use CSS animation like in the (simple) example above.
I have a png in which I want the hands to shake. I am providing the link to the image:
Please prefer using CSS, JS, HTML and jquery to do so:
http://i.stack.imgur.com/0YmwS.png
css is enough to achieve shake effect:
.handshake:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%, 90% {
transform: translate3d( 0, -1px, 0);
}
20%, 80% {
transform: translate3d(0, 2px, 0);
}
30%, 50%, 70% {
transform: translate3d(0, -4px, 0);
}
40%, 60% {
transform: translate3d(0, 4px, 0);
}
}
but to make it realistic you will need to animate the elements in the image itself. You could use program like Adobe Animate (former Flash) to export animated gif (which will btw. look far uglier and take much more space then the flash's primary export format swf).
I've made the icon of the paper plan shake when hovered over. However, the text on the buttons underneath blurs a bit too. I tried removing the animation and the text still blurs when you hover over the icon (despite the icon not doing anything).
CSS for the animation:
.fa-shake {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
jQuery:
$('.plane').hover(function() {
$(this).addClass('fa-shake');
}, function () {
$(this).removeClass('fa-shake');
});
Full code if needed.
I'd be adding the the shake to the icon..not the whole div.
$('.plane').hover(function() {
$(this).find('i').addClass('fa-shake');
}, function () {
$(this).find('i').removeClass('fa-shake');
});
This seems to fix the problem - Codepen
Having some trouble building a CSS3 loader using keyframe animations.
The loader consists of 4 boxes that animate going up and down. The issue I'm having is that when the animation is supposed to stop, the boxes jump to the initial position. The behaviour I'm looking for is: loader is animating infinitely until loading is done, at which point it should animate to the initial position and stop, sort of like having animation-iteration-count: infinite and changing it to animation-iteration-count: 1 to stop the animation. (which doesn't work btw).
See this fiddle to see what I mean: https://jsfiddle.net/cazacuvlad/qjmhm4ma/ (when clicking the stop button, the boxes should animate to the initial position, instead of jumping)
The basic setup is:
<div class="loader-wrapper"><span></span><span></span><span></span><span></span></div>
To start the loader, I'm adding a loader-active class that contains the animation to the loader-wrapper.
LESS:
.loader-wrapper {
&.loader-active {
span {
.animation-name(loader);
.animation-duration(1200ms);
.animation-timing-function(ease-in-out);
.animation-play-state(running);
.animation-iteration-count(infinite);
&:nth-child(1) {
}
&:nth-child(2) {
.animation-delay(300ms);
}
&:nth-child(3) {
.animation-delay(600ms);
}
&:nth-child(4) {
.animation-delay(900ms);
}
}
}
}
I've tried adding the animation to the spans in the loader-wrapper class w/o loader-active and playing around with animation-iteration-count and animation-play-state when loader-active is added without any luck.
Found a pretty simple workaround. Still not pure CSS, it involves a bit of JS, but it works well.
Updated fiddle: https://jsfiddle.net/cazacuvlad/qjmhm4ma/2/
What I did was to move the loader-active class to each span (instead of the wrapper), listen to the animationiteration event on each span and stop the animation then.
$('.loader-wrapper span').on('animationiteration webkitAnimationIteration', function () {
var $this = $(this);
$this.removeClass('loader-active');
$this.off();
});
This basically stops the animation at the very end of an iteration cycle.
Updated LESS
.loader-wrapper {
span {
&.loader-active {
.animation-name(loader);
.animation-duration(1200ms);
.animation-timing-function(ease-in-out);
.animation-play-state(running);
.animation-iteration-count(infinite);
&:nth-child(1) {
}
&:nth-child(2) {
.animation-delay(300ms);
}
&:nth-child(3) {
.animation-delay(600ms);
}
&:nth-child(4) {
.animation-delay(900ms);
}
}
}
}
You can also add a class which specifies the iteration count to stop the infinite loop. The advantage of this approach is that you can change the duration and timing-function which can be nice for easing out some animation (Like a rotating logo for example).
.animate-end {
animation-iteration-count: 3;
animation-duration: 1s;
animation-timing-function: ease-out;
}
We can add this class with js and it will now stop the animation at count 3.
document.querySelector(".loader-wrapper").classList.add("animate-end");
But you can also end the current itertion by counting it and change the style of the element dynamcly with Js.
let iterationCount = 0;
document.querySelector(".loader-wrapper span").addEventListener('animationiteration', () => {
//count iterations
iterationCount++;
});
yourElement.style.animationIterationCount = iterationCount + 1;
Here is a demo with your code:
document.querySelector("#start_loader").addEventListener("click", function(){
document.querySelector(".loader-wrapper").classList.add("loader-active");
})
let iterationCount = 0;
document.querySelector(".loader-wrapper span").addEventListener('animationiteration', () => {
//count iterations
iterationCount++;
console.log(`Animation iteration count: ${iterationCount}`);
});
document.querySelector("#stop_loader").addEventListener("click", function(){
//For some animation it can be nice to change the duration or timing animation
document.querySelector(".loader-wrapper").classList.add("animate-end");
//End current iteration
document.querySelectorAll(".loader-wrapper span").forEach(element => {
element.style.animationIterationCount = iterationCount + 1;
});
//Remove Classes with a timeout or animationiteration event
setTimeout(() => {
document.querySelector(".loader-wrapper").classList.remove("loader-active");
document.querySelector(".loader-wrapper").classList.remove("animate-end");
}, 1200);
})
#-moz-keyframes 'loader' {
0% {
-moz-transform: translate3d(0, 0, 0);
}
50% {
-moz-transform: translate3d(0, -10px, 0);
}
100% {
-moz-transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes 'loader' {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, -10px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
#-o-keyframes 'loader' {
0% {
-o-transform: translate3d(0, 0, 0);
}
50% {
-o-transform: translate3d(0, -10px, 0);
}
100% {
-o-transform: translate3d(0, 0, 0);
}
}
#keyframes 'loader' {
0% {
transform: translate3d(0, 0, 0)
}
50% {
transform: translate3d(0, -10px, 0)
}
100% {
transform: translate3d(0, 0, 0)
}
}
.loader-wrapper {
margin-bottom: 30px;
}
.loader-wrapper.loader-active span {
-webkit-animation-name: loader;
-moz-animation-name: loader;
-ms-animation-name: loader;
-o-animation-name: loader;
animation-name: loader;
-webkit-animation-duration: 1200ms;
-moz-animation-duration: 1200ms;
-ms-animation-duration: 1200ms;
-o-animation-duration: 1200ms;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.loader-wrapper.animate-end span {
/* Works great for some animations */
/*animation-iteration-count: 1;*/
/*animation-duration: 1s;*/
}
.loader-wrapper.loader-active span:nth-child(1) {}
.loader-wrapper.loader-active span:nth-child(2) {
animation-delay: 300ms;
}
.loader-wrapper.loader-active span:nth-child(3) {
animation-delay: 600ms;
}
.loader-wrapper.loader-active span:nth-child(4) {
animation-delay: 900ms;
}
.loader-wrapper span {
margin-right: 5px;
display: inline-block;
vertical-align: middle;
background: black;
width: 10px;
height: 10px;
}
<div class="loader-wrapper"><span></span><span></span><span></span><span></span></div>
<button id="start_loader">Start</button>
<button id="stop_loader">Stop</button>