CSS3 animation effects: top and bottom rocking div

CSS3 animation effects: top and bottom rocking div

<div id= "Square" class= "container animated" > Up/Down shaking </div>/** * Transform-origin Set the base point position of the rotation element * Animation-name Set animation name * Animation-duration Set animation time * Animation-fill-mode set the status after playback * Animation-iteration-count set the number of cycles to play * transition-timing-function:cubic-bezier Bezier effect, which has four values, refers to the point of two curves on the x-axis and the y-axis, the first point: X1 Y1; second point: X2 Y2 * Transform:translate3d sets the animation z-axis displacement of several elements, indicating that only moving on the z axis * * Note: Transform:translate3d is not equal to Transform:translatez 
    */. Animated{animation-duration:1s;/*Animation Time*/Animation-fill-mode:both;/*post-play status*/}. Animated{Animation-iteration-count:Infinite;/*number of action loops: Infinite Infinite loop*/}. Animated{animation-duration:2s;/*Animation Time*/}. Container{background:#2D97DB;width:90%;Height:90%;padding:100px;margin:20px Auto;font-family:"Microsoft Jas Black";font-size:40px;Color: White;text-align:Center;Line-height:90%;}. Container:hover{Animation-name:Container;/*name of the animation*/Transform-origin:Center Bottom;/*set the base point of the animation rotation element to: Center bottom*/cursor:Pointer;}@keyframes Container{0%, 100%, 20%, 50%, 80% {transition-timing-function:cubic-bezier (0.215,.61,.355,1);/*Bezier curve: X1 Y1 X2 Y2*/Transform:Translate3d (0,0,0);/*set to move only on the z axis*/}40%, 43%{transition-timing-function:cubic-bezier (0.755,0.50,0.855,0.060);Transform:Translate3d (0,-30px,0); }70%{transition-timing-function:cubic-bezier (0.755,0.050,0.855,0.060);Transform:Translate3d (0,-15px,0); }90%{Transform:Translate3d (0,-4px,0); }}

CSS3 animation effects: top and bottom rocking div