Develop Reference

How to put HTML element slightly off the edge of viewport to bring it back up when hovered?

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;
}

Make paragraph bounce

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.

Button text blurring when hovering over an icon

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

animate css animations speed control

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.

CSS rotate and translate transform give unexpected results

I've checked CSS-TRICKS and any other site Google offered me up to page two of their list of links, so my only assumption is I'm misunderstanding how this works or doing it wrong.
What I want is for an image to slide in from its current position to the absolute center of the page. As it slides, I want it to rotate at its center, spinning like a perfectly-balanced wheel. As it slides and rotates, I want it to appear to come towards the user. I want to do this while still keeping the image flat and unskewed.
What it does instead is rotate the image clockwise around and down back towards the left side of the page and off of it.
Here's my code (borrowed from animate.css and changed to suit my needs):
#-webkit-keyframes rotOutZm {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
opacity: 0;
}
}
#keyframes rotOutZm {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
opacity: 0;
}
}
.rotOutZm {
-webkit-animation-name: rotOutZm;
animation-name: rotOutZm;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Currently, my code does not take into account the starting point of the image, which will be wrong/messy when I have a row of images. Is there a way to dynamically figure from their starting locations, if they need to slide up to the center, slide down to the center, etc? I'm pretty sure this is a job for JavaScript or jQuery but I'm not sure how to code that.
Am I simply expecting too much of the animation functions? Should I simplify my design to not do this due to complexity?
EDIT: Here is a JSFiddle showing the code in action. It's an image with a small delay to the animation so you can see the image and then watch how it animates to see my problem. My apologies for not providing this sooner.
JSFiddle

Sure you can do it:
FireFox Live example
#keyframes rotOutZm {
100% {
margin: -50px; /* image is 100x100px size so... */
transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
opacity: 0;
}
}
.rotOutZm {
transform-origin: center;
animation: rotOutZm 2s forwards 0.5s;
}
P.S: Expand the above also for -webkit- and other vendor prefixes
vw and vh are the Viewport sizes. 50vh is half the viewport height
Note that is extremly important the order you place your stack of transform, i.e: if you move translate3d to the end or the transform rule you might get unwanted results.