H5中需要掌握的 ANIMATION 动画效果
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 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=151 ,欢迎大家传播与分享.
H5中需要掌握的 ANIMATION 动画效果的更多相关文章
- Android中xml设置Animation动画效果详解
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- android Animation 动画效果介绍
Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动 ...
- Mono For Android中简单实现按钮的动画效果
Android中动画的分Tween Animation和Frame Animation,本节主要讲Tween Animation的实现. 一般是通过XML文件来定义动画的,具体如下: 1.在项目res ...
- ios animation 动画效果实现
1.过渡动画 CATransition CATransition *animation = [CATransition animation]; [animation setDuration:1.0]; ...
- AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...
- Android Animation动画效果简介
AlphaAnimation 淡入淡出动画 <alpha>A fade-in or fade-out animation. Represents an AlphaAnimation. a ...
随机推荐
- Bzoj 2186: [Sdoi2008]沙拉公主的困惑 乘法逆元,线性筛,欧拉函数,数论
2186: [Sdoi2008]沙拉公主的困惑 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 2560 Solved: 857[Submit][St ...
- .net code injection
.NET Internals and Code Injection http://www.ntcore.com/files/netint_injection.htm Windows Hooks in ...
- ssh互信自动化脚本(待更新)
1.建立一个ip,端口,用户,密码列表 [root@localhost shell-key]# cat arg_list.txt 172.16.56.215 172.16.56.215 172.16. ...
- Goole音乐搜索
本博文的主要内容有 .Goole音乐搜索的介绍 1.Goole音乐搜索的介绍 https://zh.wikipedia.org/wiki/%E8%B0%B7%E6%AD%8C%E9%9F%B3% ...
- Drawing Lines - SGU 135(简单递推)
求N条直线最多能把一个平面分成几部分. 代码如下: ========================================================================== ...
- Selenium+Java+TestNG环境配置
1. JDK 2.eclipse+TestNG >TestNG安装. Name:testng Location:http://beust.com/eclipse.如图: 3.seleniu ...
- 【设计模式 - 13】之责任链模式(Chain Of Responsibility)
1 模式简介 责任链模式的简介: 1. 责任链模式为请求创建了一个接收者对象的链,每个接收者都包含对另一个接收者的引用,如果一个对象不能处理该请求,那么它会把相同的请求传给下一 ...
- WinForm中关于控件焦点的问题
方法一: 在打开一个窗体时,我们往往需要设置焦点让光标出现在我们希望它出现的位置上. 这时我们可以在窗体的Activated事件中设置焦点 例如我们希望光标在打开窗体的时候出现在textBox1上,我 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析 系列目录 最新比较闲,为了学习下Android的开发构建ASP.NET ...
- 小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载四(使用程序载入事件)
在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...