动画分为两种,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的更多相关文章

  1. css过渡和2d详解及案例

    css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...

  2. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

  3. 第四十二课:基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  4. Effeckt.css项目:CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

  5. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  7. CSS波纹动画

    波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...

  8. 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触发 ...

  9. CSS帧动画

    CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...

随机推荐

  1. 几个常见Win32 API函数

    1.获取客户区矩形区域 RECT cliRect; GetClientRect(hWnd, &cliRect); 2.获取窗口上下文句柄 HDC hdc = GetDC(hWnd);//... ...

  2. validate 的插件用法

    1.不推荐使用控件方式验证的方式(因为他严重的影响的html代码,也不便于语义化) <input type="text" class="required" ...

  3. APP在iOS和Android的推送规则

    因为iOS和Android不同的规则,下边将iOS和Android能接收到通知的详细情 形进行说明(前提:APP已经在设备上安装并登录过):  iOS:                    APP未 ...

  4. nsurl 测试ATS

    LIPEIdeMacBook-Air:~ lipei$ nscurl --ats-diagnostics https://xxxxx.com/ Starting ATS Diagnostics Con ...

  5. Linux安装vim失败的解决办法

    最近想了解一下linux编程,于是linux系统下输入vim,发现竟然没有安装.好吧,那就安装吧.命令: sudo apt-get install vim 百度百科:apt-get是一条linux命令 ...

  6. 模板 BFS

    [模板]BFS #include <stdio.h> #include <string.h> #include <queue> using namespace st ...

  7. java权限修饰符

  8. System.arraycopy

    ref : http://blog.csdn.net/jaycee110905/article/details/45228249

  9. 【svn】一个设置,少写几个字

    以下场景仅适用于修改bug的时候,在提交代码的时候少写几个字,嘿嘿: 1.打开[SVN 属性],在代码目录右键 2.打开BUG跟踪设置窗口 3.输入BUG的URL前缀以及%BUGID%,如 复选框,建 ...

  10. VMWare安装Solaris虚拟机的网络设置

    虚拟机的网卡使用Host-only. 在VMWare取消Host-only的DHCP. 在虚拟机的Solaris系统里ipadm命令配置ip.