文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

transition, transform和animation的语法是什么

2024-04-02 19:55

关注

这篇文章主要介绍“transition, transform和animation的语法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“transition, transform和animation的语法是什么”文章能帮助大家解决问题。

  transition

  transition允许css的属性值在一定的时间区间内平滑地过渡,语法如下:

  transition:transition-propertytransition-durationtransition-timing-functiontransition-delay[,...]

  transition的相关属性:

  transition-property:用来指定执行transition效果的属性,可以为none,all或者特定的属性。

  transition-duration:动画执行的持续时间,单位为s(秒)或者ms(毫秒)。

  transition-timing-function:变换速率效果,可选值为ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(自定义时间曲线)。

  transition-delay:用来指定动画开始执行的时间,取值同transition-duration,但是可以为负数。

  transform

  transform分为2D和3D,这里暂时只介绍比较常用的2Dtransform,其主要包含以下几种变换:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix,语法如下:

  transform:rotate|scale|skew|translate|matrix;

  transform的相关属性:

  rotate旋转

  rotate的单位是deg度,正数表示顺时针旋转,负数表示逆时针旋转。

  scale缩放

  scale的取值范围是0~n,小于1时表示缩小,反之表示放大。例如scale(0.5,2)表示水平方向缩小1倍,垂直方向放大1倍,另外,也可以通过scaleX或者scaleY对一个方向进行设置。

  skew扭曲

  skew的单位跟rotate一样都是deg度。例如skew(30deg,10deg)表示水平方向倾斜30度,垂直方向倾斜10度。

  translate偏移

  偏移同样包括水平偏移和垂直偏移。translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)。

  animation

  CSS3中的animation是通过一个叫Keyframes关键帧的玩意来控制的,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,语法如下:

  @keyframesIDENT{

  from{

  Properties:Propertiesvalue;

  }

  Percentage{

  Properties:Propertiesvalue;

  }

  to{

  Properties:Propertiesvalue;

  }

  }

  或者全部写成百分比的形式:

  @keyframesIDENT{

  0%{

  Properties:Propertiesvalue;

  }

  Percentage{

  Properties:Propertiesvalue;

  }

  100%{

  Properties:Propertiesvalue;

  }

  }

  animation和transition一样有自己相对应的属性,那么在animation主要有以下几种:animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面对其中的一些属性进行解释:

  animation-name关键帧名:

  用来定义一个动画的名称,也就是由前面的keyframes创建的动画名,默认值为none,当值为none时,将没有任何动画效果。如果我们要同时附几个animation给一个元素,只要用逗号,隔开即可。

  animation-iteration-count动画循环次数:

  默认为1,如果要进行无限循环,只要设为infinite即可。

  animation-direction动画播放的方向:

  其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

  animation-play-state播放状态:

  其主要有两个值,running和paused,其中running为默认值。可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放。这个属性不常用。

transition, transform和animation的语法是什么

关于“transition, transform和animation的语法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯