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
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).
So I have this funky little CodePen with an animation which I wish to run only if the user hasn't clicked on the <div class="someDiv"> for 30 seconds.
What I'm asking is, can anyone point me in the right direction, so when someone doesn't click on:
<div class="someDiv">
</div>
..for 30 seconds, this CSS will apply (ONCE) via appending id, similar to $(".someDiv").attr("id", "#theBounce"); and removing it in a reverse manner.
#theBounce {
background-color:red;
width:50px;
height:50px;
margin-left:auto;
margin-right:auto;
margin-top:5%;
-moz-animation: bounce 1.5s infinite;
-webkit-animation: bounce 1.5s infinite;
animation: bounce 1.5s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
Meaning that a click will force the scripts counter to start over, and a lack of clicking for 30s will apply the CSS for at least 1,5s, and then remove it, and then start the timer. It might be my Googling skills at fault here, but I just can't figure out how to make this work. It's the timing/reset on click part I haven't figured out really.
A link, an idea, a suggestion. I'll be happy for all of it. Thanks.
I suggest you use setTimeout.
On document load start your setTimeout by defining a variable equal to the timer which after a certain number of milliseconds adds your content. Then redefine your timer variable to a new setTimeout for a new amount of milliseconds.
var myTimer;
myTimer = setTimeout(function(){ /*do stuff after 3 seconds*/ }, 3000);
Then if someone does something to stop the timer you can stop the timer by:
clearTimeout(myTimer);
Here's an example:
(function () {
var myTimer,
announce = document.getElementById("announcement"),
button = document.getElementById("stopIt");
function firstTimer () {
announcement.innerHTML = '';
myTimer = setTimeout(function () {
populateContent();
}, 500);
}
function populateContent () {
announcement.innerHTML = 'push the button!!';
myTimer = setTimeout(function () {
firstTimer();
}, 500);
}
button.addEventListener('click', function () {
clearTimeout(myTimer);
});
firstTimer();
}());
#announcement {
border: 1px solid red;
height: 5ex;
width: 30%;
}
<div id="announcement"></div>
<button type="button" id="stopIt">Stop!!</button>
I'm not an expert, so someone may have a better answer, but you can use the setTimeout function in Javascript to do this, I think.
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
The first example on that page seems similar to what you'd want, here's an untested suggestion:
HTML:
Live Example
Set CSS bounce after 30 seconds
Reset timer
Javascript:
var timeoutID;
function setBounce() {
timeoutID = window.setTimeout(bounceIt, 30000);
}
function bounceIt() {
// Code to find the bounce div, apply the CSS style to it,
// and then add a new timeout on the CSS to remove the style after 1.5s
}
function unbounceIt(bounceTimeoutID) {
window.clearTimeout(bounceTimeoutID);
}
function resetBounceTimer() {
window.clearTimeout(timeoutID);
}
Hopefully this is a step in the right direction
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.