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 条评论
登录 后参与评论

相关文章

  • getclass removeclass

    河湾欢儿
  • sass

    我们大家都知道html、css不属于编程语言属于标记语言,所以很难像js一样定义变量、编写方法实现模块化,而目前的css编写模式中都是定义一些公共样式类名,那一...

    河湾欢儿
  • 盒子模型

    1> padding内填充(padding在元素的边框以内,内容之外,padding会显示元素的背景) Top|right|bottom|left

    河湾欢儿
  • CSS3过渡与动画

       增强页面渲染性能,提前通知浏览器元素将要做什么动画,让浏览器提前准备合适的优化设置

    Leophen
  • 小程序·云开发实战 - 校园约拍小程序

    创意来源于生活,之所以开发这个校园约拍小程序,是因为在摄影选修课上常听老师抱怨外出写生老找不到模特,许多大学生都想拥有一套专属自己记忆的摄影作品,记录下不会磨灭...

    腾讯云开发TCB
  • 微信小程序:动画(Animation)

    官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 ani...

    FlyLolo
  • dotnet 设计规范 · 数组定义

    X 不建议设置数组类型的字段为只读。虽然用户不能修改字段,但是可以修改字段里面的元素。如果需要一个只读的集合,建议定义为只读集合。

    林德熙
  • 当React开发者初次走进React-Native的世界

    看RN文档时,我会发现入门基础那一块介绍的都是React的内容,进阶篇则介绍了很多IOS和Android的API

    外婆的彭湖湾
  • React Native 在卖菜公司的落地之路

    内容来源:2018 年 3 月 31 日,宋小菜资深前端工程师陈锦辉在“React 技术专场交流活动”进行《RN 在卖菜公司的落地之路》演讲分享。IT 大咖说(...

    IT大咖说
  • java基础:枚举(你木有见过的船新版本)

    枚举经常用来设计一些常量,比如一星期有7天,且只能有唯一的7天,所以枚举是在一定的范围取值,并且必须是枚举类型中的任意一个,而且只能有一个

    用户7649162

扫码关注云+社区

领取腾讯云代金券