P26:React高级-CSS3的keyframes动画
目录
用transition
只能作一些最简单的动画,如果你想稍微复杂点,transition
就做不出来了。这时候就可以用 CSS3 中的关键帧动画keyframes
。本文就花几分钟学习一下 keyframes,如果你 CSS3 动画部分的知识很好,完全可以跳过这节课。
keyframes 动画介绍
此属性与animation
属性是密切相关的,keyframes
译成中文就是关键帧,我最早接触这个关键帧的概念是字 flash 中,现在 Flash 已经退出历史舞台了。它和transition
比的优势是它可以更加细化的定义动画效果。比如我们设置上节课的按钮隐藏动画,不仅可以设置透明度,还可以设置颜色。
@keyframes hide-item{ 0% { opacity:1; color:yellow; } 50%{ opacity: 0.5 ; color:red; } 100%{ opacity:0; color: green; } }
这就算是你的动画制作好了,但是动画还没有使用。
使用动画
使用动画的关键词是animation
,然后后边跟上你的制作的动画名称,如下面这段代码。
.hide{ animation:hide-item 2s ease-in ; }
这句的意思就是,使用hide-item
动画,持续时间是 2 秒钟,然后缓动效果是由慢到快(开始的时候慢,之后快)。
但是你会发现,动画执行一遍后又恢复了原状,这个是因为没设置forwards
属性,它是用来控制停止到最后一帧的。 我们把代码改写成下面的样子。
.hide{ animation:hide-item 2s ease-in forwards; }
完整 CSS 代码的实现
那keyframes
的动画已经基本学会了,接下来就把所有的代码修改为keyframes
的形式吧。所有代码如下:
.show{ animation:show-item 2s ease-in forwards; } .hide{ animation:hide-item 2s ease-in forwards; } @keyframes hide-item{ 0% { opacity:1; color:yellow; } 50%{ opacity: 0.5 ; color:red; } 100%{ opacity:0; color: green; } } @keyframes show-item{ 0% { opacity:0; color:yellow; } 50%{ opacity: 0.5 ; color:red; } 100%{ opacity:1; color: green; } }
最终动画效果如下:
总结
keyframes
也是只能实现很简单的动画效果,一些复杂的动画最好还是使用别人造好的轮子,下节课继续学习React
中的动画吧。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P26:React高级-CSS3的keyframes动画
码云笔记 » P26:React高级-CSS3的keyframes动画