css3动画从左飘逸,一款从左边快速滑出的的css动画

一款从左边快速滑出的的css动画，代码炒鸡简单，牛逼网站的不二之选哈,请用谷歌，火狐等主流浏览器浏览，拒绝使用ie9以下版本的ie浏览器

html>

从左边快速滑出-柏平

.main{ overflow: hidden;}

.slideleftfast{

text-align: center;

width: 300px;

height: 300px;

line-height: 300px;

margin:0 auto;

background: red;

border-radius:10px;

animation-name: slideleftfast;

-webkit-animation-name: slideleftfast;

animation-duration: 1s;

-webkit-animation-duration: 1s;

animation-timing-function: ease-in-out;

-webkit-animation-timing-function: ease-in-out;

visibility: visible !important;

}

@keyframes slideleftfast {

0% {

transform: translateX(150%);

}

50%{

transform: translateX(-8%);

}

65%{

transform: translateX(4%);

}

80%{

transform: translateX(-4%);

}

95%{

transform: translateX(2%);

}

100% {

transform: translateX(0%);

}

}

@-webkit-keyframes slideleftfast {

0% {

-webkit-transform: translateX(150%);

}

50%{

-webkit-transform: translateX(-8%);

}

65%{

-webkit-transform: translateX(4%);

}

80%{

-webkit-transform: translateX(-4%);

}

95%{

-webkit-transform: translateX(2%);

}

100% {

-webkit-transform: translateX(0%);

}

}

柏平博客