css3过渡与动画

过渡 当触发的时候会有过渡的效果 1.transition-property:none|all|某一个属性值 2.transition-duration:多少秒 也就是说过渡效果执行多长时间 默认的是0s 3.transition-timing-function:ease|linear|ease-out|ease-in|ease-in-out|贝塞尔曲线的参数值cubic-bezier(number,number,number,number)|steps(走几步,start|end) ease:两头慢,中间快 Linear:匀速 Ease-in:开始慢 Ease-out:结束慢 Ease-in-out:开始结束慢 Ease和ease-in-out的区别就是ease-in-out的幅度更大一点 4.transition-delay:延迟多少秒; 默认的是0s 5.transition合写 例如:transition:left 2s ease 1s

动画 不用触发自己执行,而且可以做多贞的动画 1.animation-name:none|自己命名 2.animation-duration:动画多长时间 3.animation-timing-function 运动轨迹和过渡的参数是一模一样的,同上 4.animation-iteration-count:infinite|动画执行的次数 默认是1次 5.animation-direction:normal|reverse|alternate|alternate-reverse 方向 alternate往返 alternate-reverse相反的往返 6.animation-play-state:running|paused 让动画暂停或者是继续播放 7.animation-delay延迟 8.animation-fill-mode:none|backwards|forwards|both 动画在开始的时候是否要保持第一针的设置,动画在结束的时候是否保持结束时的状态 None:不做设置 Backwards动画开始在第一贞的状态 forwards结束的时候保持动画最后那贞的状态 Both开始的时候保持第一贞的状态,结束的时候保持结束时候的状态 9.合写 animation animation:abc 2s ease 0s 1 normal none running 1 播放次数 Normal 方向 direction None fill-mode Running 播放状态

动画贞两种书写方式 @-webkit-keyframes abc{ 0%{left:0;top:0;} 50%{left:250px;top:100px;} 100%{left:500px;top:0;} } @-webkit-keyframes abcd{ 0%{color:#fff;} 100%{color:#000;} } @-webkit-keyframes abcde { from{ opacity: 0; } to{ opacity: 1; } }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Porschev[钟慰]的专栏

jQuery Gallery Plugin在Asp.Net中使用

jQuery Gallery Plugin在Asp.Net中使用 推荐一个简单易用的Gallery插件:jQuery Gallery Plugin 下面是在As...

1889
来自专栏androidBlog

Android 正 N 边形圆角头像的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

1101
来自专栏Android小菜鸡

自定义View学习之路(三)————验证码的实现

走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的验证码为例。开始系统的学习View的绘制。 验证码需求:

1071
来自专栏娱乐心理测试

轻松生成小程序分享海报

小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生...

5253
来自专栏企鹅号快讯

前端学习自学笔记:day10

今天是第十天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: 第十天的笔记:HTML AND CSS: 响应式设...

2027
来自专栏韦弦的偶尔分享

微信小程序分享图片的简易canvas工具类

如有需要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

1982
来自专栏向治洪

VectorDrawable与AnimatedVectorDrawable

VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。先来一个例子吧...

2075
来自专栏前端说吧

JS-事件之鼠标、键盘都能控制的下拉选框效果

3625
来自专栏编程

java基础知识,font属性css写法,代码详解!

CSS属性值 字体与文本 网页设计中有很多的文字要去处理,标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本 字体 首先要有一...

1998
来自专栏算法channel

Python-GUI|Tkinter模块

01 Tkinter Tkinter模块是Python的标准Tk GUI工具包的接口,它并不是必须掌握的,但是掌握一个Python的标准图形库还是非常有意思的...

60710

扫码关注云+社区

领取腾讯云代金券