第八十三节,CSS3动画效果

CSS3动画效果

学习要点:
1.动画简介
2.属性详解
3.简写和版本

本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行。

一.动画简介

    CSS3提供了类 Flash关键帧控制的动画效果,通过animation属性实现。

    animation实现动画效果主要由两个部分组成:

    1.通过类 Flash动画中的关键帧声明一个动画;

    2.在animation属性中调用关键帧声明的动画。

    CSS3提供的animation是一个复合属性,它包含了很多子属性。如下表所示:

                 属性                                        说明

      animation-name           用来指定一个关键帧动画的名称,这个动画

                        名必须对应一个@keyframes规则。CSS加

                        载时会应用animation-name指定的动画,

                        从而执行动画。

 

       animation-duration               用来设置动画播放所需的时间

      animation-timing-function         用来设置动画的播放方式

           animation-delay                   用来指定动画的延迟时间

      animation-iteration-count             用来指定动画播放的循环次数

         animation-direction               用来指定动画的播放方向

        animation-play-state              用来控制动画的播放状态

         animation-fill-mode               用来设置动画的时间外属性

              animation                     以上的简写形式

除了这9个属性之外,动画效果还有一个重要的属性,就是关键帧属性:@keyframes。它的作用是声明一个动画,然后在animation调用关键帧声明的动画。

       //基本格式,“name”可自定义

       @keyframes name {

              /*...*/

       }

二.属性详解
在讲解动画属性之前,先创建一个基本的样式。

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

[email protected]先声明一个动画关键帧。

//基本格式,“name”可自定义

       @keyframes name {

              /*...*/

       }

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
    }
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

2.animation-name 调用@keyframes关键帧动画

           属性值                                  说明

            none                 默认值,没有指定任何动画

            关键帧动画名称             是由@keyframes指定创建的动画名称

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*调用@keyframes关键帧动画*/
    animation-name: myani;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

以上通过关键帧的方式,这里插入了三个关键帧。0%表示动画开始的地方,50%表示动画进行一半时,100%表示动画结束时

3.animation-duration设置动画播放的时间

就是动画用多长时间执行完成

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*调用@keyframes关键帧动画*/
    animation-name: myani;
    /*设置动画播放的时间*/
    animation-duration: 2s;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
    0% {
        background-color: #ff3728;
        border: 2px solid #fffa35;
        margin-left:0;
    }
    50% {
        background-color: #fffa35;
        border: 2px solid #1f38ff;
        margin-left:50px;
    }
    100% {
        background-color: #1522ff;
        border: 2px solid #30ff3c;
        margin-left:100px;

    }
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

4.animation-timing-function设置缓动 

           属性值                                 说明

            ease                     默认值,元素样式从初始状态过渡到终止状态时速度由

                               快到慢,逐渐变慢。等同于贝塞尔曲线(0.25,0.1,

                                   0.25, 1.0)

           linear                       元素样式从初始状态过渡到终止状态速度是恒速。等同

                                  于贝塞尔曲线(0.0,0.0, 1.0, 1.0)

         ease-in                      元素样式从初始状态过渡到终止状态时,速度越来越

                                  快,呈一种加速状态。等同于贝塞尔曲线(0.42, 0,

                                      1.0, 1.0)

        ease-out                    元素样式从初始状态过渡到终止状态时,速度越来越

                              慢,呈一种减速状态。等同于贝塞尔曲线(0,0,0.58,

                                 1.0)

      ease-in-out                     元素样式从初始状态过渡到终止状态时,先加速,再减

                                 速。等同于贝塞尔曲线(0.42,0, 0.58, 1.0)

     cubic-bezier                     自定义三次贝塞尔曲线

 

时间: 2024-10-12 16:24:36

第八十三节,CSS3动画效果的相关文章

CSS3 动画效果带来的bug

css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是当我们使用上面的transition属性后,A点移动到B点是2秒内完成的,当执行JS代码时候,DIV还没到应该的位置,那么,在Div.style.left=B; console.log(Div.offsetLeft); 这样console出来的是起点坐标而不是终点坐标. 即使你让其JS线程主动挂起使

css3 动画效果

css3 动画效果  做css3的动画效果,w3c的文档的文档已有事例.动画事例,也是看了半天才搞出来. 下面我就是结合个人理解进行介绍.最后个人做的一个动画demo css3的动画事例主要需要理解animation:可以算是动画的声明部分.你可以把动画属性的内容全部写到后边,动画的属性主要有:animation-name animation-duration还有一些动画延时,动画播放次数.这些要根据动画效果进行添加. 格式有:animation:animation-name animation

Bounce.js – 快速创建漂亮的 CSS3 动画效果

Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代码. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网格加载效果[附源码下载] 源码下载      在线演示 本文

35个让人惊讶的 CSS3 动画效果演示

35个让人惊讶的 CSS3 动画效果演示 本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分(基础教程qkxue.net),随着越来越多的浏览器对 CSS3 支持的不断完善(腾云科技ty300.com),设计师和开发者们有了更多的选择.如今,用纯 CSS 就可以实现各种各样很酷的效果,甚至是动画. 1. Pure CSS Coke Can 2. Colorful Clock 3. jQ

鼠标悬停css3动画效果

下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬停css3动画效果</title> <link href="css/lanrenzhijia.css" rel="stylesheet" type="text/

css3 动画效果与公司框架简易动画的差异

先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到的. 一.特点与差异. 1.简易动画直接通过对dom元素追加class类名与属性参数 像这样 <img src="images/page02/text01.png"  class="text01 cmn-animate" cfg="{action:[{s

CSS自学笔记(14):CSS3动画效果

在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScript了. CSS3中新增的动画效果的属性以及主流浏览器支持情况 属性 浏览器支持 transition IE Firefox Chrome Safari(-webkit-) Opera @keyframes IE Firefox Chrome(-webkit-) Safari(-webkit-)

animate.css 一些常用的CSS3动画效果

大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:http://daneden.me/animate/ 自定义下载样式:http://daneden.me/animate/build/ git地址:https://github.com/daneden/animate.css

35个让人惊讶的CSS3动画效果

1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery Menu 6. Frame-by-Frame Animation (Hover to Play) 7. AT-AT Walker 8. Contextual Slideout Tips With jQuery & CSS3 9. CSS3 & jQuery Slide Out Button 1