CSS3的动画在PC网页上或者APP上用得越来越多,比如H5页面的应用,目前在营销传播上的意义比较大,还有企业官网或者APP主要介绍也用得比较多,当然还有很多地方都用到.所以学习css的动画也迫在眉睫.那我们就进入主题!
animation 属性在CSS中可以使用其他的css属性,来实现动画,例如color,background-color,height或者width.每一个动画需要定义@keyframes 动画名,作为animation的属性值,例如:
.element { animation: pulse 5s infinite;}@keyframes pulse { 0% { background-color: #001F3F; } 100% { background-color: #FF4136; }}
我们来实现下面这个动作:
HTML结构:
<div class="element"></div>
CSS代码:
.element { width: 100%; height: 100%; animation: pulse 5s infinite; } @keyframes pulse { 0% { background-color: #001F3F; } 100% { background-color: #FF4136; } }
每一个 @keyframes 属性规则的定义,都会在指定的时间内发生动作.例如,动作从0%开始,到100%结束.keyframes 可以用简写方式,animation属性来控制,或者其他八个子属性,控制keyframes如何运作..
animation-name
: 申明动画@keyframes的名称.
animation-duration
: 动画在多久内完成一个周期.
animation-timing-function
: 设置预加速度曲线动画,例如 ease 或者linear.
animation-delay
: 动画延迟执行的时间.
animation-direction
: 设定动画执行完成后的方向.默认是起始开始执行.
animation-iteration-count
: 动画执行的次数.
animation-fill-mode
:设定动画是执行之前还是之后.
例如,你可以设置动画保持在最后的状态,或者也可以切换回动画开始的状态.
animation-play-state
: 开始或者暂停动画
这些属性可以这样使用:
@keyframes stretch { /* declare animation actions here */}.element { animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; }/* is the same as: */.element { animation: stretch 1.5s ease-out 0 alternate infinite none running;}
我们来看下这个动画:
HTML结构:
<div class="element"></div>
CSS代码:
.element { height: 250px; width: 250px; margin: 0 auto; background-color: red; animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; } @keyframes stretch { 0% { transform: scale(.3); background-color: red; border-radius: 100%; } 50% { background-color: orange; } 100% { transform: scale(1.5); background-color: yellow; } } body, html { height: 100%; } body { display: flex; align-items: center; justify-content: center; }
下面是子属性可以使用的所有值列表:
animation-timing-function | ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (例如. cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
animation-duration | Xs 或者 Xms |
animation-delay | Xs 或者 Xms |
animation-iteration-count | X |
animation-fill-mode | forwards, backwards, both, none |
animation-direction | normal, alternate |
animation-play-state | paused, running, running |
如果动画有着同样的开始和结束属性,可以用逗号分隔0%和100%:
@keyframes pulse { 0%, 100% { background-color: yellow; } 50% { background-color: red; }}
一个选择器可以同时申明多个动画,它们之间用逗号隔开.下面的例子,使用了两个keyframe,也就是2个动画的效果
.element { animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate;}
我们看下下面这个动画
HTML代码结构
<div class="element"></div>
CSS代码:
.element { height: 400px; width: 400px; background-color: red; animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; border-radius: 100%; } @keyframes pulse { 0%, 100% { background-color: red; } 50% { background-color: orange; } } @keyframes nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(150px, 0); } 80% { transform: translate(-150px, 0); } } html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; }
性能
多数动画属性都存在着性能问题,因此,我们在使用它们的时候,需要谨慎的去处理.可以,我们也可以和下面的安全性动画一起使用:
transform: translate()
transform: scale()
transform: rotate()
opacity
原创内容,转载请注明出处.公众微信号:bianchengderen,欢迎大家传播与分享.
融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。