#keyframes fadeOutDownMed {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(150px);
-ms-transform: translateY(150px);
transform: translateY(150px);
}
}
http://jsfiddle.net/iaezzy/99JbQ/
This works but the animation is straight down, I need it to fade out slant like \, or to a certain element wherever that might be, is that possible?
Thanks
Try append translateX to the transform attribute like this:
#keyframes fadeOutDownMed {
0% {
opacity: 1;
-webkit-transform: translateY(0) translateX(0);
-ms-transform: translateY(0) translateX(0);
transform: translateY(0) translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(150px) translateX(150);
-ms-transform: translateY(150px) translateX(150);
transform: translateY(150px) translateX(150);
}
}
Demo: http://jsfiddle.net/k7Wp4/
Related
So I am using animate.css to animate a keyboard that shows what key to input. Currently I'm using animate__heartbeat to animate the keys to be pressed but the problem is the animation makes it overflow other keys and I would like to reduce that size.
These are the classes I am using on each keys:
class="animate__animated animate__slow animate__infinite animate__heartBeat"
Since I am new to animate.css I dont know how to change the size it increases during the animation and is there a way to reduce it in css?
if you are using the animate.min.css go to this link https://unminify.com/ and unminify the css and find the below code:
#-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
and Replace them with:
#-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
I want to create a floating image transition with CSS and react,same like in Divi theme header images
enter image description here
https://divisupreme.com/features/
Try this:
.floating {
-webkit-animation: movebounce 5s linear infinite;
animation: movebounce 5s linear infinite;
}
#-webkit-keyframes movebounce {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes movebounce {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<div className='floating'><img src='YOUR_IMG' alt='' /></div>
I need an arrow to slightly move (bounce) to the bottom right corner on hover, using CSS. I've used the code below and I like what it does however this only moves the arrow left/right. How do I amend it so that it moves slightly to the bottom as well? I've tried using 'translateY' but couldn't workout the exact pixel amount for the animation to be smooth.
I've tried using 'bounce' but actually 'swing' seems to look better.
What I'm looking for is the kind on animation of this page:
http://ianlunn.github.io/Hover/ (called 'Wobble to Bottom Right')
.arrow:hover{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
You have to use translate(x,y) instead of translateX(x) for 2d transformation as #fen1x mentioned in the comment above
Try this:
#keyframes hvr-wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}
33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}
49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}
66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
I could really use some help. On this site http://medicalaid.org I've been trying to fix it after another developer left. The last problem I've got is I can't get half of the webkit animations to load in IE10, all other browsers work fine and virtually all content divs have them. I've tried rewriting the css for example:
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-moz-transform: scale(.3);
-o-transform: scale(.3);
-ms-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
-o-transform: scale(.9);
-ms-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
}
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
-ms-animation-name: bounceIn;
animation-name: bounceIn;
}
And I can't get anything to work, would be great if someone could take a look and help me out
Try to remove the unprefixed versions of your css:
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
You need to define more than just the animation-name; you'll also need to provide duration. Without this information the browser doesn't know how long the animation is to last. Below I'm stating that the entire animation should last 2 seconds:
.bounceIn.go {
animation: bounceIn 2s;
}
The resulting animation is presumably along the lines of what you were desiring. I defined styles for .go that would make it green, and rounded.
I asked me a question. When I create animation with the -webkit- prefix (or an another prefixes), I need to write properties with this prefix only or I must add all of the prefixes.
e.g.
#-webkit-keyframes bounce {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
or
#-webkit-keyframes bounce {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
Since only WebKit browsers can apply #-webkit-keyframes rules, it doesn't make any sense whatsoever to include any other prefixes inside those rules.
You want to include other prefixes for the #keyframes rules, not the properties within them. The properties inside use matching prefixes where appropriate:
#-webkit-keyframes bounce {
0% { -webkit-transform: scale(0); }
100% { -webkit-transform: scale(1); }
}
#-moz-keyframes bounce {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
#-o-keyframes bounce {
0% { -o-transform: scale(0); }
100% { -o-transform: scale(1); }
}
#keyframes bounce {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
(There is no #-ms-keyframes, and it is not necessary to use -ms-transform in #keyframes.)