Motion Animation in a Box

Question

I have a blue box with these CSS3 settings:

.learn-more-btn {
background: #006eff; 
padding: 20px 40px; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-o-border-radius: 5px; 
color: #fff; 
text-transform: uppercase; 
letter-spacing: 1px; 
display: inline-block; 
-webkit-box-shadow: 0px 3px 0px 0px #309383; 
-moz-box-shadow: 0px 3px 0px 0px #309383; 
box-shadow: 1px 1px 1px 1px white; 
margin: 60px 0 0; 
font-weight: bold; }

.learn-more-btn:hover, 
.learn-more-btn:focus { 
background: #006eff; color: #fff; 

}

I wanted to know how to add a motion animation to it, in which it rotated about 30° degrees to the right, then to the left. Because it’s a "What can I do for you?" And I wanted to get him to have this animation to highlight it even more, and by hovering the mouse over the box, the box would stop moving. I’d be grateful if someone could help me!

Answer 1

use the All Animation framework : http://all-animation.github.io/

Just like HTML5, CSS3 also came with several interesting and revolutionary novelties... Among them we have the property Animation. With this rich property, we can produce transitions only with CSS. But you already know that. Even so, the property Animation and also the keyframe method can be bad to manage when we have a lot of animation on the same site. Ai, if there is a framework that helps this work, our life becomes easier. That’s where All Animation CSS3 comes in.

The All Animation CSS3 framework

Quite excited about these rich possibilities that the Animation property offers us, Jeftar Mascarenhas and I decided to create a framework of animations css3, which thank God is giving "some hits", and today I will share with my friends "dev’s ninjas". Its name is All Animation CSS3.

"All ..." What?

The name sounds kind of ironic because All Animation CSS3 (all css3 animations) is nothing more than a framework that brings together rich CSS3 animations for you to use in your academic or commercial project. Contains a set of animations, fun to make your project sexier. Are cross-browser animations that will give more emphasis to your pages like sliders, 3D’s effects and etc...

When to use?

Like any framework, your goal is to streamline the creation process in your day-to-day. If you took on a large project, whose time span is very short and certainly, you would not have time to develop interesting animations... using this framework would be great to gain more "timers".

When not using?

As I mentioned above, All Animation is very good for those with a very high workload and a short time to develop, but if you have extra time to develop your projects, then you can feel free to create your animations at hand.

"Very well, I want to use in my projects"

Where to start:

It is easy to integrate the framework into our project , we will see step by step how to finish it.

Step 1, include the necessary files in the head, so your animations work properly:

<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />
<script type="text/javascript" src="yourpath/jquery.js"></script>

Step 2, within the body tag boundaries, put the following html structure:

<div id="animation"></div>
<button class="anny-class">Trigger class, go!</button>

Note: "" is optional because you can also create an animation without needing an activator (because the button works as an animation trigger) Step 3, you can use the following line of jQuery code, to fire your animation:

$(".anny-class").click(function(){
 $("#animation").addClass("journal");
});

Journal is one of the classes that our framework provides for us to use

If you want to add the effect at some time, you can add a timer:

setTimeout(function(){
 $("#animation").addClass("journal");
},2000);

Heed:

If you choose to add some more animation to an element that has already undergone another animation of All Animation, or want to restart the animation, you will have to remove the class from the last animation and insert its, ex:

 $("#animation").removeClass("journal").addClass("four-rock");

We have several classes in place of the Journal class, let’s see what they are:

Special

dance

Journal

Pulse

Pulse-slow

Jamp

four-rock

Bounce:

enter-up-Bounce

enter-down-Bounce

enter-right-Bounce

enter-left-Bounce

Scale-Bounce

jump-Bounce

Perspective:

Tree-flip-right

Tree-flip

Tree-flip-up

Tree-flip-down

flip-left-Bounce

Rotate-flip

flip-right-Bounce

Fading Entrances:

flip-top

flip-left

flip-right

flip-bottom

Rotate:

Rotate-flip-down

Rotate-down-Bounce

Rotate-out

Agrecives:

flash-bang

bomb

I won’t list them all, because I’m adding more over time Does anyone else use?

According to Google Animation, in the first month I launched this framework, more than 127 countries used All Animation in their projects

So, to end it...

Below are two links for more information:

http://all-animation.github.io/

https://github.com/clovisdasilvaneto/all-animation

I hope I helped , hugs

Answer 2

You can use Animations of the CSS, for example:

    @keyframes help{
        0%{ transform: rotateZ(0deg); }
        10%{ transform: rotateZ(10deg); }
        15%{ transform: rotateZ(15deg); }
        20%{ transform: rotateZ(20deg); }
        25%{ transform: rotateZ(25deg); }
        30%{ transform: rotateZ(30deg); }
        40%{ transform: rotateZ(25deg); }
        45%{transform: rotateZ(20deg); }
        50%{ transform: rotateZ(15deg); }
        55%{transform: rotateZ(10deg); }
        60%{ transform: rotateZ(5deg); }
        65%{transform(rotateZ(0deg); )}
        70%{ transform: rotateZ(-5deg); }
        75%{transform: rotateZ(-10deg); }
        80%{transform: rotateZ(-15deg); }
        85%{ transform: rotateZ(-20deg); }
        90%{transform:rotateZ(-25deg);}
        95%{ transform: rotateZ(-30deg); }
        100%{ transform: rotateZ(0deg);}
    }

Inside the class of the button a .learn-more-btn place:

animation: help;
animation-duration: 2s;
animation-iteration-count: infinite;

And in the learn-more-btn:hover place:

animation-play-state: paused;

For the animation to stop straight just set another keyframe, example:

@keyframes help-stop {
    100%{ transform: rotateZ(0deg); }
}

Then add inside the Hover:

animation: help-stop;
animation-duration: 1s;

Link about animations: http://www.w3schools.com/css/css3_animations.asp