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);
}
}
Related
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);
}
}
how you use $ in css
[http://codepen.io/jlong/pen/KBhDf][1]
in the above mentioned link on the 3rd line $heartbeat-size: 10px; I wanted to know how to use this element in the style sheet.
To answer your question, here is the processed CSS result of the scss in your pen:
#-webkit-keyframes heartbeat {
0% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
#-moz-keyframes heartbeat {
0% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
#-o-keyframes heartbeat {
0% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
#keyframes heartbeat {
0% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
body {
text-align: center;
padding: 50px;
}
/* Styles for old versions of IE */
.heartbeat {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.heartbeat:not(:required) {
-webkit-animation: heartbeat 1300ms ease 0s infinite normal;
-khtml-animation: heartbeat 1300ms ease 0s infinite normal;
-moz-animation: heartbeat 1300ms ease 0s infinite normal;
-ms-animation: heartbeat 1300ms ease 0s infinite normal;
-o-animation: heartbeat 1300ms ease 0s infinite normal;
animation: heartbeat 1300ms ease 0s infinite normal;
display: inline-block;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 36px;
height: 36px;
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.heartbeat:not(:required):after, .heartbeat:not(:required):before {
position: absolute;
content: "";
background: #e87;
}
.heartbeat:not(:required):before {
-moz-border-radius-topleft: 12px;
-webkit-border-top-left-radius: 12px;
border-top-left-radius: 12px;
-moz-border-radius-bottomleft: 12px;
-webkit-border-bottom-left-radius: 12px;
border-bottom-left-radius: 12px;
top: 12px;
left: 0;
width: 36px;
height: 24px;
}
.heartbeat:not(:required):after {
-moz-border-radius-topleft: 12px;
-webkit-border-top-left-radius: 12px;
border-top-left-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
border-top-right-radius: 12px;
top: 0;
left: 12px;
width: 24px;
height: 12px;
}
<span class="heartbeat">Loading...</span>
To understand the principle...
Using variables in CSS is not possible at the moment and is unlikely to be possible anytime soon.
This is only available using CSS pre-processors, such as less or sass.
jsfiddle and codepen allow you to use scss (sass) in the CSS panel and correctly output the processed CSS when rendering.
sass.js is a library that allows you to use .sass files in <link> tags and processes them into valid CSS at load time.
It is likely that major browsers will soon be capable of processing .scss, .sass or .less files natively and it is already possible by using browser extensions.
This, however, does not mean CSS will ever support variables.
#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/
i used keyframes in order that to make a plus effect on a text which every 15s make a plus effect this work in chrome but doesnt work in Firefox.
i didnt know how can i make a 15s delay between each pulse effect so i try to use more percent in work i dont khow is it tru or not
#-webkit-keyframes pulse_animation {
0% { -webkit-transform: scale(1); }
3% { -webkit-transform: scale(1); }
4% { -webkit-transform: scale(1); }
6% { -webkit-transform: scale(1.08); }
8% { -webkit-transform: scale(1); }
10% { -webkit-transform: scale(1); }
12% { -webkit-transform: scale(1); }
14% { -webkit-transform: scale(1); }
16% { -webkit-transform: scale(1); }
18% { -webkit-transform: scale(1); }
20% { -webkit-transform: scale(1); }
22% { -webkit-transform: scale(1); }
24% { -webkit-transform: scale(1); }
26% { -webkit-transform: scale(1); }
28% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
32% { -webkit-transform: scale(1); }
34% { -webkit-transform: scale(1); }
36% { -webkit-transform: scale(1); }
38% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1); }
42% { -webkit-transform: scale(1); }
44% { -webkit-transform: scale(1); }
46% { -webkit-transform: scale(1); }
48% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1); }
52% { -webkit-transform: scale(1); }
54% { -webkit-transform: scale(1); }
56% { -webkit-transform: scale(1); }
58% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
62% { -webkit-transform: scale(1); }
64% { -webkit-transform: scale(1); }
66% { -webkit-transform: scale(1); }
68% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1); }
72% { -webkit-transform: scale(1); }
74% { -webkit-transform: scale(1); }
76% { -webkit-transform: scale(1); }
78% { -webkit-transform: scale(1); }
80% { -webkit-transform: scale(1); }
82% { -webkit-transform: scale(1); }
84% { -webkit-transform: scale(1); }
86% { -webkit-transform: scale(1); }
88% { -webkit-transform: scale(1); }
90% { -webkit-transform: scale(1); }
92% { -webkit-transform: scale(1); }
94% { -webkit-transform: scale(1); }
96% { -webkit-transform: scale(1); }
98% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
#-moz-keyframes pulse_animation {
0% { -moz-transform: scale(1); }
3% { -moz-transform: scale(1); }
4% { -moz-transform: scale(1); }
6% { -moz-transform: scale(1.08); }
8% { -moz-transform: scale(1); }
10% { -moz-transform: scale(1); }
12% { -moz-transform: scale(1); }
14% { -moz-transform: scale(1); }
16% { -moz-transform: scale(1); }
18% { -moz-transform: scale(1); }
20% { -moz-transform: scale(1); }
22% { -moz-transform: scale(1); }
24% { -moz-transform: scale(1); }
26% { -moz-transform: scale(1); }
28% { -moz-transform: scale(1); }
30% { -moz-transform: scale(1); }
32% { -moz-transform: scale(1); }
34% { -moz-transform: scale(1); }
36% { -moz-transform: scale(1); }
38% { -moz-transform: scale(1); }
40% { -moz-transform: scale(1); }
42% { -moz-transform: scale(1); }
44% { -moz-transform: scale(1); }
46% { -moz-transform: scale(1); }
48% { -moz-transform: scale(1); }
50% { -moz-transform: scale(1); }
52% { -moz-transform: scale(1); }
54% { -moz-transform: scale(1); }
56% { -moz-transform: scale(1); }
58% { -moz-transform: scale(1); }
60% { -moz-transform: scale(1); }
62% { -moz-transform: scale(1); }
64% { -moz-transform: scale(1); }
66% { -moz-transform: scale(1); }
68% { -moz-transform: scale(1); }
70% { -moz-transform: scale(1); }
72% { -moz-transform: scale(1); }
74% { -moz-transform: scale(1); }
76% { -moz-transform: scale(1); }
78% { -moz-transform: scale(1); }
80% { -moz-transform: scale(1); }
82% { -moz-transform: scale(1); }
84% { -moz-transform: scale(1); }
86% { -moz-transform: scale(1); }
88% { -moz-transform: scale(1); }
90% { -moz-transform: scale(1); }
92% { -moz-transform: scale(1); }
94% { -moz-transform: scale(1); }
96% { -moz-transform: scale(1); }
98% { -moz-transform: scale(1); }
100% { -moz-transform: scale(1); }
}
#keyframes pulse_animation {
0% { transform: scale(1); }
3% { transform: scale(1); }
4% { transform: scale(1); }
6% { transform: scale(1.08); }
8% { transform: scale(1); }
10% { transform: scale(1); }
12% { transform: scale(1); }
14% { transform: scale(1); }
16% { transform: scale(1); }
18% { transform: scale(1); }
20% { transform: scale(1); }
22% { transform: scale(1); }
24% { transform: scale(1); }
26% { transform: scale(1); }
28% { transform: scale(1); }
30% { transform: scale(1); }
32% { transform: scale(1); }
34% { transform: scale(1); }
36% { transform: scale(1); }
38% { transform: scale(1); }
40% { transform: scale(1); }
42% { transform: scale(1); }
44% { transform: scale(1); }
46% { transform: scale(1); }
48% { transform: scale(1); }
50% { transform: scale(1); }
52% { transform: scale(1); }
54% { transform: scale(1); }
56% { transform: scale(1); }
58% { transform: scale(1); }
60% { transform: scale(1); }
62% { transform: scale(1); }
64% { transform: scale(1); }
66% { transform: scale(1); }
68% { transform: scale(1); }
70% { transform: scale(1); }
72% { transform: scale(1); }
74% { transform: scale(1); }
76% { transform: scale(1); }
78% { transform: scale(1); }
80% { transform: scale(1); }
82% { transform: scale(1); }
84% { transform: scale(1); }
86% { transform: scale(1); }
88% { transform: scale(1); }
90% { transform: scale(1); }
92% { transform: scale(1); }
94% { transform: scale(1); }
96% { transform: scale(1); }
98% { transform: scale(1); }
100% { transform: scale(1); }
}
.first-visit{
-webkit-animation-name: 'pulse_animation';
-webkit-animation-duration: 18000ms;
-webkit-transform-origin:40% 40%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-moz-animation-name: 'pulse_animation';
-moz-animation-duration: 18000ms;
-moz-transform-origin:40% 40%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
animation-name: 'pulse_animation';
animation-duration: 18000ms;
transform-origin:40% 40%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
use
-moz-animation-name: pulse_animation;
instead of
-moz-animation-name: 'pulse_animation';
the animation name is an identifier, not a string, and hence shouldn't be in quotes.
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.)