关闭

前端开发常用css动画代码

时间: 2018-10-18阅读: 1498标签: 动画

/*向左移动并弹性显示*/

@-webkit-keyframes fadeToLeftTan{
0%{ -webkit-transform:translateX(100%); opacity:0;}
70%{ -webkit-transform:translateX(-5%); opacity:1;}
80%{ -webkit-transform:translateX(2%); opacity:1;}
90%{ -webkit-transform:translateX(-2%); opacity:1;
100%{ -webkit-transform:translateX(0); opacity:1;}
}

@keyframes fadeToLeftTan
0%{ transform:translateX(100%); opacity:0;}
70%{ transform:translateX(-5%); opacity:1;}
80%{ transform:translateX(2%); opacity:1;}
90%{ transform:translateX(-2%); opacity:1;}
100%{ transform:translateX(0); opacity:1;}
}


/*向右移动并弹性显示*/

@-webkit-keyframes fadeToRightTan{
0%{ -webkit-transform:translateX(-100%); opacity:0;}
70%{ -webkit-transform:translateX(5%); opacity:1;}
80%{ -webkit-transform:translateX(-2%); opacity:1;}
90%{ -webkit-transform:translateX(2%); opacity:1;}
100%{ -webkit-transform:translateX(0); opacity:1;}
}

@keyframes fadeToRightTan{
0%{ transform:translateX(-100%); opacity:0;}
70%{ transform:translateX(5%); opacity:1;}
80%{ transform:translateX(-2%); opacity:1;}
90%{ transform:translateX(2%); opacity:1;}
100%{ transform:translateX(0); opacity:1;}
}


/*向上移动并弹性显示*/

@-webkit-keyframes fadeToTopTan
0%{ -webkit-transform:translateY(100%); opacity:0;}
70%{ -webkit-transform:translateY(-5%); opacity:1;}
80%{ -webkit-transform:translateY(2%); opacity:1;}
90%{ -webkit-transform:translateY(-2%); opacity:1;}
100%{ -webkit-transform:translateY(0); opacity:1;}
}

@keyframes fadeToTopTan{
0%{ transform:translateY(100%); opacity:0;}
70%{ transform:translateY(-5%); opacity:1;}
80%{ transform:translateY(2%); opacity:1;}
90%{ transform:translateY(-2%); opacity:1;}
100%{ transform:translateY(0); opacity:1;}
}


/*向下移动并弹性显示*/

@-webkit-keyframes fadeToDownTan{
0%{ -webkit-transform:translateY(-100%); opacity:0;}
70%{ -webkit-transform:translateY(5%); opacity:1;}
80%{ -webkit-transform:translateY(-2%); opacity:1;}
90%{ -webkit-transform:translateY(2%); opacity:1;}
100%{ -webkit-transform:translateY(0); opacity:1;}
}

@keyframes fadeToDownTan{
0%{ transform:translateY(-100%); opacity:0;}
70%{ transform:translateY(5%); opacity:1;}
80%{ transform:translateY(-2%); opacity:1;}
90%{ transform:translateY(2%); opacity:1;}
100%{ transform:translateY(0); opacity:1;}
}


/*从大向小变化弹性显示*/

@-webkit-keyframes fadeInMaxToMinTan{
0%{ -webkit-transform:scale(2); opacity:0;}
70%{ -webkit-transform:scale(.9); opacity:1;}
85%{ -webkit-transform:scale(1.1); opacity:1;}
100%{ -webkit-transform:scale(1); opacity:1;}
}

@keyframes fadeInMaxToMinTan{
0%{ transform:scale(2); opacity:0;}
70%{ transform:scale(.9); opacity:1;}
85%{ transform:scale(1.1); opacity:1;}
100%{ transform:scale(1); opacity:1;}
}


/*从小向大变化弹性显示*/

@-webkit-keyframes fadeInMinToMaxTan{
0%{ -webkit-transform:scale(0); opacity:0;}
70%{ -webkit-transform:scale(1.1); opacity:1;}
85%{ -webkit-transform:scale(.9); opacity:1;}
100%{ -webkit-transform:scale(1); opacity:1;
}

@keyframes fadeInMinToMaxTan{
0%{ transform:scale(0); opacity:0;}
70%{ transform:scale(1.1); opacity:1;}
85%{ transform:scale(.9); opacity:1;}
100%{ transform:scale(1); opacity:1;}
}


/*向左移动显示*/

@-webkit-keyframes fadeToLeft{
0%{ -webkit-transform:translateX(100%); opacity:0;}
100%{ -webkit-transform:translateX(0); opacity:1;}
}

@keyframes fadeToLeft{
0%{ transform:translateX(100%); opacity:0;}
100%{ transform:translateX(0); opacity:1;}
}


/*向右移动显示*/

@-webkit-keyframes fadeToRight{
0%{ -webkit-transform:translateX(-100%); opacity:0;}
100%{ -webkit-transform:translateX(0); opacity:1;}
}

@keyframes fadeToRight{
0%{ transform:translateX(-100%); opacity:0;}
100%{ transform:translateX(0); opacity:1;}
}


/*向上移动显示*/

@-webkit-keyframes fadeToTop
0%{ -webkit-transform:translateY(100%); opacity:0;}
100%{ -webkit-transform:translateY(0); opacity:1;}
}

@keyframes fadeToTop{
0%{ transform:translateY(100%); opacity:0;}
100%{ transform:translateY(0); opacity:1;}
}


/*向上60移动显示*/

@-webkit-keyframes fadeToTop60{
0%{ -webkit-transform:translateY(60px); opacity:0;}
100%{ -webkit-transform:translateY(0); opacity:1;}
}

@keyframes fadeToTop60{
0%{ transform:translateY(60px); opacity:0;}
100%{ transform:translateY(0); opacity:1;}
}


/*向下移动显示*/

@-webkit-keyframes fadeToDown{
0%{ -webkit-transform:translateY(-100%); opacity:0;}
100%{ -webkit-transform:translateY(0); opacity:1;}
}

@keyframes fadeToDown{
0%{ transform:translateY(-100%); opacity:0;}
100%{ transform:translateY(0); opacity:1;}
}


/*向下60移动显示*/

@-webkit-keyframes fadeToDown60{
0%{ -webkit-transform:translateY(-60px); opacity:0;}
100%{ -webkit-transform:translateY(0); opacity:1;}
}

@keyframes fadeToDown60{
0%{ transform:translateY(-60px); opacity:0;}
100%{ transform:translateY(0); opacity:1;}
}


/*上下微移漂浮*/

@-webkit-keyframes flashTopDown{
0%{ -webkit-transform:translateY(0); opacity:1;}
100%{ -webkit-transform:translateY(8px); opacity:.8;}
}

@keyframes flashTopDown{
0%{ transform:translateY(0); opacity:1;}
100%{ transform:translateY(8px); opacity:.8;}
}


/*从大向小变化显示*/

@-webkit-keyframes fadeInMaxToMin{
0%{ -webkit-transform:scale(2); opacity:0;}
100%{ -webkit-transform:scale(1); opacity:1;}
}

@keyframes fadeInMaxToMin{
0%{ transform:scale(2); opacity:0;}
100%{ transform:scale(1); opacity:1;}
}


/*从小向大变化显示*/

@-webkit-keyframes fadeInMinToMax{
0%{ -webkit-transform:scale(0); opacity:0;}
100%{ -webkit-transform:scale(1); opacity:1;}
}

@keyframes fadeInMinToMax{
0%{ transform:scale(0); opacity:0;}
100%{ transform:scale(1); opacity:1;}
}

 

/*大小闪动变化   变小*/

@-webkit-keyframes flashMaxMin{
0%{ -webkit-transform:scale(1);}
100%{ -webkit-transform:scale(.98);}
}

@keyframes flashMaxMin{
0%{ transform:scale(1);}
100%{ transform:scale(.98);}
}


/*大小闪动变化变大*/

@-webkit-keyframes flashMax{
    0%{ -webkit-transform:scale(1);}
    100%{ -webkit-transform:scale(1.05);}
}  

@keyframes flashMax{
    0%{ transform:scale(1);}
    100%{ transform:scale(1.05);}
}


/*渐显*/

@-webkit-keyframes fadeIn{
0%{ opacity:0;}
100%{ opacity:1;}
}
@keyframes fadeIn{
0%{ opacity:0;}
100%{ opacity:1;}
}


/*渐隐*/

@-webkit-keyframes fadeOut{
0%{ opacity:1;}
100%{ opacity:0;}
}

@keyframes fadeOut{
0%{ opacity:1;}
100%{ opacity:0;}
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1165

CSS3 动画基础

以下我们将会介绍主要两个 CSS3 在动画的属性: Transition 与 Animation ,并配合实例来练习这些技术,后面我也会介绍一些不错的相关开发工具。

css3 过渡和动画

在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果

CSS波纹动画

以上就是css波纹动画的代码和效果图。想要看具体的效果可以复制代码浏览,当然啦,也可以设置属于自己的漂亮的背景颜色和链接。

为什么要用css动画替换js动画?

通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏览器中,因为浏览器可用的内存比较大

10个常用的CSS动画库

Animista是一个在线动画生成器,同时也是一个动画库,它为我们提供了以下功能,我们可以选择想要的动画类型(例如entrance/exist),除了可以选择某个动画(例如,scale-in)外

前端动画必知必会:React 和 Vue 都在用的 FLIP 思想实战

拿到了这个需求,第一直觉是怎么做?假设第一行第一个图片移动到了第二行第三列,是不是要计算出第一行的高度,再计算出第二行前两个元素的宽度,然后从初始的坐标点通过 CSS 或者一些动画 API 移动过去?

css3元素动画实例

css3中实现动画一般有两种方式,一个是transition过渡,一个是animation动画。最主要区别就是transition需要条件触发,通常会用hover来触发,而animation则更灵活,可以自动播放,也可以通过条件触发。

css3实现椭圆轨迹旋转

X轴Y轴在一个矩形内移动;设置动画延时设置Y轴延时为动画时长的一半, 运动轨迹变成菱形;设置三次贝塞尔曲线,为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和

css3动画怎么停止?

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 \\\"from\\\" 和 \\\"to\\\",等同于 0% 和 100%。

css3常用动画+动画库

animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。Effect.css 针对不同UI的CSS3动画和过渡效果集,包含了丰富的CSS3动画和过渡效果,Hover.css是一套使用CSS3动画实现的Hover特效集锦

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!