HTML过渡动画

1、css3过渡动画

2、圆角 阴影 透明度

    
    


    

    

    

    
床前明月光
    
床前明月光

CSS3圆角

• 设置某一个角的圆角，比如设置左上角的圆角：
  border-top-left-radius:30px 60px;

• 同时分别设置四个角： border-radius:30px 60px 120px 150px;

• 设置四个圆角相同：
  border-radius:50%;

CSS3阴影
box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

rgba（新的颜色值表示法）

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

---

3、运动曲线

    
    


    
linear
    
ease
    
ease-in
    
ease-out
    
ease-in-out
    
bezier

---

4、图片文字遮罩

    
    


    

        
        

            
这是
        
    

5、变形

---

6、元素旋转

---

7、变形中心点

---

8、背面可见

    
    


    

        
div元素
    

---

9、图片翻面

    
    


    

        

            
            
        
        
这是
    

---

10、inimation动画

CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

• linear 匀速

• ease 开始和结束慢速

• ease-in 开始是慢速

• ease-out 结束时慢速

• ease-in-out 开始和结束时慢速

• steps 动画步数
  5、animation-delay 动画延迟
  6、animation-iteration-count 动画播放次数 n|infinite
  7、animation-direction

• normal 默认动画结束不返回

• Alternate 动画结束后返回
  8、animation-play-state 动画状态

• paused 停止

• running 运动
  9、animation-fill-mode 动画前后的状态

• none 不改变默认行为

• forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

• backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

• both 向前和向后填充模式都被应用
  10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

---

11、animation人物走路动画

---

12、浏览器前缀

CSS浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

自动添加浏览器前缀

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。

---

13、loading动画

    
    
    


    

        

        

        

        

        

        
loading...