为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第14天 前端工程师2022版 过渡与动画第一讲

标签:
JavaScript

课程名称:前端工程师2022版


课程章节:过渡与动画


课程讲师: elex

课程内容:

过渡的四个参数是什么意思?什么是过渡的活动效果?

过渡是transition属性,过渡可以为一个元素在不同样式之间变化自动添加“补间动画”。

transition-property // 哪些属性要过渡

transition-duration // 动画时间

transition-timing-function // 动画变化曲线(缓动效果)

transition-delay // 延迟时间

例如:transition: all 1s linear 0s;

什么属性能能够过渡?

所有数值类型的属性,都可以参与过渡,比如width、height、left、top、border-radius等

背景颜色和文字颜色都可以被过渡;

所有变形(包括2D和3D)都能被过渡。

如何定义和调用动画?无限调用怎么做?

可以使用@keyframes来定义动画;

例如// @keyframes r { // 动画的名字

    from { // 起始状态transform: rotate(0); }

    to { // 结束状态 transform: rotate(360deg); }

}

定义动画之后可以使用animation属性调用动画;

例如 animation: r 1s linear 0s;

// r: 动画名字

// 1s: 动画时长

// linear: 缓动效果

// 0s: 延迟


// infinite: 永远执行参数。

// alternate 交替参数

例如:animation: movelr 2s linear 0s infinite alternate;

如果想让动画停止在最后结束状态,那么要加上forwards(保留参数)。


课程收获:

谢谢老师,讲的非常细致,很容易懂。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消