CSS 3 动画2D
动画分为两种,1,逐帧动画 组成动画的每一个画面就是一帧 2,关键帧动画,确定关键帧电脑会自动过度
动画中如果遇到不兼容的问题也是要加前缀
@-webkit-keyframes规则 @-webkit-animation属性
关键帧动画: @keyframes + 动画名称
第一帧最后一帧
from:第一帧动画
to:最后一帧动画
@keyframes donghua{
from {
width: 100px;height: 100px;
}
to {
width: 20px;height: 200px
}
关键帧动画: @keyframes + 动画名称
进度的形式设置关键帧
@keyframes myAnimation{
0%{width: 50px; height: 100px}
50%{width: 100px;height:100px}
100%{width: 100px;height:200px}
}
调用动画
调用动画的可选属性
(3)设置动画的延迟时间
animation-delay: 1s;
(4)设置动画的方向 direction
normal: 默认值 正常方向
reverse: 反转
alternate: 逐次取反
animation-direction: alternate;
(5)设置动画执行的次数 iteration
触发动画执行条件 并且保持该条件
infinite:无限次 或数字
animation-iteration-count: 1 ;
(6) 设置元素播放前后的填充状态
none:默认值;
backwards:设置元素动画之前的状态和第一帧相同
forwards:设置元素动画完成之后的状态和最后一帧相同
both:backwards+forwards
animation-fill-mode: both;
(7)控制元素动画播放的状态
running: 执行;
paused: 暂停
animation-play-state: paused;
(8)控制动画播放运动形式
animation-timing-function: ease-in;
linear 匀速
ease 缓冲
ease-in由慢到快
ease-out由快到慢
ease-in-out由慢到快再慢
CSS 3 动画2D的更多相关文章
- css过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- CSS变形动画
CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...
- 第四十二课:基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- Effeckt.css项目:CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- CSS波纹动画
波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...
- css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动。
css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...
- CSS帧动画
CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...
随机推荐
- tomcat chinese miscode and chinese input in IDEA
JAVA_OPTS="$JAVA_OPTS -Djavax.servlet.request.encoding=UTF-8 -Dfile.encoding=UTF -8 -Duser.lang ...
- 【五子棋AI循序渐进】——整合完成
经过一年多的学习和探索,终于在今天得到了一些回报,在实现PVS多线程和加入了一个新的启发模式之后,搜索速度达到了120K左右,现在整合了VCF/VCT引擎.PVS混合引擎之后,棋力与连珠fiver6基 ...
- python 多线程就这么简单(续)
之前讲了多线程的一篇博客,感觉讲的意犹未尽,其实,多线程非常有意思.因为我们在使用电脑的过程中无时无刻都在多进程和多线程.我们可以接着之前的例子继续讲.请先看我的上一篇博客. python 多线程就这 ...
- iOS UITableView 移除单元格选中时的高亮状态
在处理UITableView表格时,我们希望用户能够和触摸单元格式进行交互,但是希望用户在完成交互之后,这些单元格的选中状态能够消失,.Cocoa Touch 提供了两种方法来防止单元格背持久选中. ...
- PythonDay02
>三目运算符 简单的if---else---语句 result = 1234 if 1 > 2 else 4321 print(result) >集合 set集合,是一个无序且不重复 ...
- Nginx下配置SSL安全协议
生成证书: # cd /usr/local/nginx/conf # openssl genrsa -des3 -out server.key 1024 # openssl req -new -key ...
- 使用maven来管理您的java项目
maven是一个项目管理工具,使用maven可以自动管理java项目的整个生命周期,包括编译.构建.测试.发布和报告等.在大型项目开发中,使用maven来管理是必不可少的. 一.安装maven 1.W ...
- bootstrap入门-1.可视化布局
下载地址:http://v3.bootcss.com/getting-started/#download HTML模板: <!DOCTYPE html> <html> &l ...
- leetcode_222 Count Complete Tree Nodes
题目: Given a complete binary tree, count the number of nodes. Definition of a complete binary tree fr ...
- 一个安邦逻辑漏洞爆破密码的py脚本
漏洞地址: 安邦保险集团存在逻辑漏洞可遍历用户ID暴力破解用户原始密码进而重置用户密码(附脚本) http://www.wooyun.org/bugs/wooyun-2010-0119851 脚本PO ...