I have used css3 animate for small text to rotate but it wont rotate.
Jsfiddle
<h1 class="title">Coming Soon <small>btw learning</small></h1>
small {
animation:spin 4s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
use display:inline-block;
<h1 class="title">Coming Soon <span class="animation">btw learning</span></h1>
.title
{
font-family: 'Cinzel Decorative', cursive;
text-align: center;
font-size: 100px;
margin-top: 25%;
}
.animation {
animation:spin 4s linear infinite;
display:inline-block;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
Related
I'm looking for solution to my problem. I want to zoom in and out without stoping every second in a div with backgroung-image.
Something like this fruit in the game:
https://www.google.co.il/search?source=hp&ei=ghU7XfaEBai4gwfA6rrIDA&q=snake&oq=snaj&gs_l=psy-ab.1.0.35i305i39j0i10l9.776.1740..2868...0.0..0.192.754.0j5......0....1..gws-wiz.....0..35i39j0i131j0j0i67.KPZVLy3h8CU
I find the solution below but I use react so I need css/js solution and not jQuery one.
Zoom an image every one second jQuery
The solution is to use CSS "breathing" animation. An example how it works:
#breathing-button {
width: 270px;
padding: 20px;
margin: 50px auto;
border: 1px solid #d1d1d1;
-webkit-animation: breathing 7s ease-out infinite normal;
animation: breathing 7s ease-out infinite normal;
font-size: 24px;
background: #5885cb;
color: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 3px;
text-align: center;
}
#-webkit-keyframes breathing {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
<div id="breathing-button">Breathing Button</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);
}
}
Hello I have a button that pulses in css3 (works great) what I want it to do is pulse every 12sec...how can I do this?
.pulse {
animation-name: pulse_animation;
animation-duration: 10000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes pulse_animation {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
I have set the duration to 3sec to let you see exactly how does it work. You can freely adjust the duration by urself. Just change 3s into 12s.
https://jsfiddle.net/bL164jj8/
.pulse {
animation-name: pulse_animation;
animation-duration: 3s;
transform-origin: 70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
height: 100px;
width: 100px;
background-color: lightblue;
}
#keyframes pulse_animation {
0% {
transform: scale(1);
}
8% {
transform: scale(1.01);
}
16% {
transform: scale(1.02);
}
24% {
transform: scale(1.03);
}
32% {
transform: scale(1.04);
}
40% {
transform: scale(1.05);
}
50% {
transform: scale(1.06);
}
58% {
transform: scale(1.05);
}
66% {
transform: scale(1.04);
}
74% {
transform: scale(1.03);
}
82% {
transform: scale(1.02);
}
90% {
transform: scale(1.01);
}
100% {
transform: scale(1);
}
}
<div class='pulse'>
</div>
I am trying to add a slide up from the bottom CSS3 Animation to the <main> element in this site, but the animation is not playing / taking place.
Any idea why?
Here is the link to the page where it is not happening: https://dl.dropboxusercontent.com/u/270523/help/animate/new.html
And here is the CSS for the animation:
.animated{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
#keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
On your HTML code, you mistyped here:
<link rel="stylsheet" href="animate.css" type="text/css">
It's "stylesheet" !
I have a little problem. I want that the following animation gets fired when the user visits the page AND when he hovers over the element (it's an image). Right now it just fires when visiting the page, but .animated:hover gets ignored? Any advice?
.animated, .animated:hover {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: swing 4s;
-moz-animation: swing 4s;
-ms-animation: swing 4s;
-o-animation: swing 4s;
animation: swing 4s;
}
#-webkit-keyframes swing {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; }
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(15deg); }
20% { -webkit-transform: rotate(-10deg); }
30% { -webkit-transform: rotate(10deg); }
40% { -webkit-transform: rotate(-8deg); }
50% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-5deg); }
70% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-2deg); }
90% { -webkit-transform: rotate(2deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swing {
0% { -moz-transform: rotate(0deg); }
10% { -moz-transform: rotate(15deg); }
20% { -moz-transform: rotate(-10deg); }
30% { -moz-transform: rotate(10deg); }
40% { -moz-transform: rotate(-8deg); }
50% { -moz-transform: rotate(8deg); }
60% { -moz-transform: rotate(-5deg); }
70% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-2deg); }
90% { -moz-transform: rotate(2deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swing {
0% { -o-transform: rotate(0deg); }
10% { -o-transform: rotate(15deg); }
20% { -o-transform: rotate(-10deg); }
30% { -o-transform: rotate(10deg); }
40% { -o-transform: rotate(-8deg); }
50% { -o-transform: rotate(8deg); }
60% { -o-transform: rotate(-5deg); }
70% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-2deg); }
90% { -o-transform: rotate(2deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swing {
0% { transform: rotate(0deg); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-10deg); }
30% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
Nice animation, the hover is being cancelled out as its looking for change in the original CSS class, you can fix this by declaring the hover its on animation function.
/*PAGE LOAD ANIMATION*/
.animated{
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: swing 4s;
-moz-animation: swing 4s;
-ms-animation: swing 4s;
-o-animation: swing 4s;
animation: swing 4s;
}
#-webkit-keyframes swing {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; }
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(15deg); }
20% { -webkit-transform: rotate(-10deg); }
30% { -webkit-transform: rotate(10deg); }
40% { -webkit-transform: rotate(-8deg); }
50% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-5deg); }
70% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-2deg); }
90% { -webkit-transform: rotate(2deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swing {
0% { -moz-transform: rotate(0deg); }
10% { -moz-transform: rotate(15deg); }
20% { -moz-transform: rotate(-10deg); }
30% { -moz-transform: rotate(10deg); }
40% { -moz-transform: rotate(-8deg); }
50% { -moz-transform: rotate(8deg); }
60% { -moz-transform: rotate(-5deg); }
70% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-2deg); }
90% { -moz-transform: rotate(2deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swing {
0% { -o-transform: rotate(0deg); }
10% { -o-transform: rotate(15deg); }
20% { -o-transform: rotate(-10deg); }
30% { -o-transform: rotate(10deg); }
40% { -o-transform: rotate(-8deg); }
50% { -o-transform: rotate(8deg); }
60% { -o-transform: rotate(-5deg); }
70% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-2deg); }
90% { -o-transform: rotate(2deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swing {
0% { transform: rotate(0deg); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-10deg); }
30% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
/*HOVER ANIMIATION*/
.animated:hover{
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: swingHover 4s;
-moz-animation: swingHover 4s;
-ms-animation: swingHover 4s;
-o-animation: swingHover 4s;
animation: swingHover 4s;
}
#-webkit-keyframes swingHover {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; }
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(15deg); }
20% { -webkit-transform: rotate(-10deg); }
30% { -webkit-transform: rotate(10deg); }
40% { -webkit-transform: rotate(-8deg); }
50% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-5deg); }
70% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-2deg); }
90% { -webkit-transform: rotate(2deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swingHover {
0% { -moz-transform: rotate(0deg); }
10% { -moz-transform: rotate(15deg); }
20% { -moz-transform: rotate(-10deg); }
30% { -moz-transform: rotate(10deg); }
40% { -moz-transform: rotate(-8deg); }
50% { -moz-transform: rotate(8deg); }
60% { -moz-transform: rotate(-5deg); }
70% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-2deg); }
90% { -moz-transform: rotate(2deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swingHover {
0% { -o-transform: rotate(0deg); }
10% { -o-transform: rotate(15deg); }
20% { -o-transform: rotate(-10deg); }
30% { -o-transform: rotate(10deg); }
40% { -o-transform: rotate(-8deg); }
50% { -o-transform: rotate(8deg); }
60% { -o-transform: rotate(-5deg); }
70% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-2deg); }
90% { -o-transform: rotate(2deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swingHover {
0% { transform: rotate(0deg); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-10deg); }
30% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.swingHover {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: swingHover;
-moz-animation-name: swingHover;
-o-animation-name: swingHover;
animation-name: swingHover;
}