CSS 3 animation, set the animation base point
@-Webkit-keyframes swing {
50% {
-Webkit-transform: rotate (10deg );
Transform: rotate (10deg );
}
100% {
-Webkit-transform: rotate (-10deg );
Transform: rotate (-10deg );
}
}
@ Keyframes swing {
50% {
-Webkit-transform: rotate (10deg );
-Ms-transform: rotate (10deg );
Transform: rotate (10deg );
}
100% {
-Webkit-transform: rotate (-10deg );
-Ms-transform: rotate (-10deg );
Transform: rotate (-10deg );
}
}
Call Animation
. Swing {
-Webkit-transform-origin: center;
-Ms-transform-origin: center;
Transform-origin: center;
-Webkit-animation-name: swing;
Animation-name: swing;
}
Transform-origin is used to set the base point of the rotating element, top left right bottom %,
View the http://www.w3school.com.cn/cssref/pr_transform-origin.asp effect, such as, bottle left and right swing, to center as the base point left and right swing.