规则用于创建动画。

　　@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

　　@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

　　通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

　　规定动画的名称

　　规定动画的时长

　　animation

　　animation 属性是一个简写属性，用于设置动画属性：

　　animation-name：规定 @keyframes 动画的名称。

　　animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。

　　animation-timing-function：规定动画的速度曲线。默认是 “ease”。

　　animation-delay：规定动画何时开始。默认是 0

　　animation-iteration-count：规定动画被播放的次数。默认是 1。

　　animation-direction：规定动画是否在下一周期逆向地播放。默认是 “normal”。

　　animation-fill-mode：规定对象动画时间之外的状态

　　侧边栏实现

　　代码如下:

　　/* 动画定义 */

　　@-webkit-keyframes move_right {

　　from {

　　opacity: 0;

　　}

　　to {

　　opacity: 1;

　　-webkit-transform: translateX(120px);

　　transform: translateX(120px);

　　}

　　}

　　@keyframes move_right {

　　from {

　　opacity: 0;

　　}

　　to {

　　opacity: 1;

　　-webkit-transform: translateX(120px);

　　transform: translateX(120px);

　　}

　　}

　　@-webkit-keyframes move_left {

　　from {

　　opacity: 1;

　　}

　　to {

　　opacity: 0;

　　-webkit-transform: translateX(-120px);

　　transform: translateX(-120px);

　　}

　　}

　　@keyframes move_left {

　　from {

　　opacity: 1;

　　}

　　to {

　　opacity: 0;

　　-webkit-transform: translateX(-120px);

　　transform: translateX(-120px);

　　}

　　}

　　@-webkit-keyframes move_up {

　　from {

　　opacity: 0;

　　}

　　to {

　　opacity: 1;

　　-webkit-transform: translateY(-250px);

　　transform: translateY(-250px);

　　}

　　}

　　@keyframes move_up {

　　from {

　　opacity: 0;

　　}

　　to {

　　opacity: 1;

　　-webkit-transform: translateY(-250px);

　　transform: translateY(-250px);

　　}

　　}

　　代码如下:

　　/* 动画绑定 */

　　.move_right {

　　-webkit-animation-name : move_right;

　　animation-name : move_right;

　　-webkit-animation-duration : 1s;

　　animation-duration : 1s;

　　-webkit-animation-iteration-count : 1;

　　animation-iteration-count : 1;

　　-webkit-animation-fill-mode : forwards;

　　animation-fill-mode : forwards;

　　}

　　.move_left {

　　-webkit-animation-name : move_left;

　　animation-name : move_left;

　　-webkit-animation-duration : 1s;

　　animation-duration : 1s;

　　-webkit-animation-iteration-count : 1;

　　animation-iteration-count : 1;

　　-webkit-animation-fill-mode : forwards;

　　animation-fill-mode : forwards;

　　}

　　.move_up {

　　-webkit-animation-name : move_up;

　　animation-name : move_up;

　　-webkit-animation-duration : 1s;

　　animation-duration : 1s;

　　-webkit-animation-iteration-count : 1;

　　animation-iteration-count : 1;

　　-webkit-animation-fill-mode : forwards;

　　animation-fill-mode : forwards;

　　}

　　.fadeIn {

　　-webkit-transform : translateX(120px);

　　transform : translateX(120px);

　　opacity: 1;

　　}

　　.fadeInUp {

　　-webkit-transform : translateY(-250px);

　　transform : translateY(-250px);

　　opacity: 1;

　　-webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;

　　transition :transform .2s ease-out, opacity .2s ease-out;

　　}

　　.fadeOutLeft {

　　-webkit-transform : translateX(-120px);

　　transform : translateX(-120px);

　　opacity: 0.0;

　　-webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;

　　transition :transform .2s ease-out, opacity .2s ease-out;

　　}

　　html

　　代码如下:

　　sidebar

　　淡进

　　淡出

　　向上淡进

　　向左淡出

　　加入JS。
本文来源于成都网站建设公司、成都网站设计制作公司与成都APP开发公司-桔子科技公司！
成都网站建设,成都网站设计,成都网站制作,成都网页设计，成都网站建设公司 ,成都网站设计公司, 成都网站制作公司，成都网页设计公司，成都手机网站建设，手机网站建设，成都APP开发，APP开发，成都建网站，成都做网站，成都微信网站建设，成都微商城网站建设，成都商城网站建设，成都平台网站建设，成都响应式网站建设，成都微信营销，成都网络公司。

下一篇：成都网站设计公司细说CSS 文本上一篇：成都网站设计：网站设计时结构清晰要凌驾于美观之上