为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第14天 前端工程师2022版 过渡与动画第一讲

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

2022.09.18 21:22 56浏览

课程名称:前端工程师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(保留参数)。


课程收获:

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

点击查看更多内容
0人点赞

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

评论

作者其他优质文章

正在加载中
手记
粉丝
2
获赞与收藏
18

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消