精华内容
下载资源
问答
  • CSS3动画

    2017-11-06 14:06:25
    CSS3动画

    CSS3动画

    1、animation动画属性

    animation-name: 取值是动画的名字;
    animation-duration: ;动画完成的之间
    animation-timing-function: ; 定义动画完成的方式
    animation-delay: ;动画的延迟时间
    animation-iteration-count: ;动画执行的次数 (infinite是无限循环的意思)
    animation-direction: ;规定动画执行的方向
    alternate 属性值是规定动画来回执行
    animation-state: ;规定动画是否执行默认值running , 当它为pause的时候便是暂停
    animation-fill-mode: ;规定动画开始之前和结束之后发生的操作,默认值为none;forwards表示动画结束后元素保留最后帧的状态,backwords则与forwards相反
    animation-play-state: running; !*动画的开始结束

    2、@keyframes

    规定一个动画,包括动画名称
    from规定了动画的初始状态
    to规定动画的末状态
    0%也可以表示动画初始状态
    100%表示动画的末状态
    比较倾向后者,因为后者可以表示中间的断点的状态

    展开全文
  • css3动画

    2018-12-10 15:25:40
    css3动画可以分为两种:过渡动画、关键帧动画 一、过渡动画(transition)  过渡动画就是从开始状态到结束状态这个过程中所产生的动画·。所谓的状态是指大小、位置、颜色、变形(transform)等这些属性。css过渡...

    css3动画可以分为两种:过渡动画、关键帧动画

    一、过渡动画(transition)

           过渡动画就是从开始状态到结束状态这个过程中所产生的动画·。所谓的状态是指大小、位置、颜色、变形(transform)等这些属性。css过渡动画只能定义首位两个状态,所以是最简单的一种动画。

           要想使用一个元素产生过渡动画,用transition属性定义动画的参数有:

           transition-property:规定对哪个属性进行过渡

           trsnsition-duration:定义过渡的时间,默认是0

           transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出,默认是ease

           transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0

           .animate-div{
                    transition-property: width;/*对宽度进行过渡*/
                    transition-duration: 3s;/*过度时间为3s*/
                    transition-timing-function: ease;/*缓动效果为ease*/
                    transition-delay: 3s;/*延迟3s后才开始过渡*/
          }
         简写
         .animate-div{transition: width 3s ease 3s;}
         如是使用属性的默认值,则可以省略
         .animate-div{transition: width 3s;}
         相当于
         .animate-div{transition: width 3s ease 0;}
         如果想要同时使用多个属性,可以使用逗号隔开
         .animate-div{transition: width 3s, height 3s, background-color 3s;}

        使用transition属性只是规定了要如何去过渡,想要让动画发生,还得要有元素状态的改变。如何改变元素状态呢,即在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时的状态。

    二、关键帧动画(keyframes)

            关键帧动画不同于过度动画只能定义首位两个状态,他可以定义多个状态,进而实现更复杂的动画效果。

            关键帧动画使用一个关键字@keyframes来定义动画。具体格式为:

           @keyframes 动画名称{

                      时间点{元素状态}

                      时间点{元素状态}

                      ......

            }

           参数:

           只要像这样把定义好的动画绑定到元素上,就能实现关键帧动画了,而不是像第一种过渡动画那样,需要一个状态的改变才能触发动画。

        

         为了兼容浏览器,还需加上各大浏览器的私有前缀

        

    展开全文
  • CSS3 动画

    2017-02-21 17:04:21
    CSS3 动画属性 —— Animation@keyframes规则和animation属性: @keyframes: 规定动画 animation: 所有动画属性的简写属性,除了animation-play-state属性。 animation-name: 规定@keyframes动画名称。 ...

    CSS3 动画属性 —— Animation

    @keyframes规则和animation属性:

    @keyframes: 规定动画
    animation: 所有动画属性的简写属性,除了animation-play-state属性。
    animation-name: 规定@keyframes动画名称。
    animation-duration: 规定动画完成一个周期所花费的秒或毫秒。默认是0。
    animation-timing-tunction: 规定动画的速度曲线。默认是ease。
    animation-delay: 规定动画何时开始。默认是0。
    animation-iteration-count: 规定动画被播放的次数。默认是1。
    animation-direction: 规定动画是否在下一周期逆向地播放。默认是normal。
    animation-play-state: 规定动画是否在运行或暂停。默认是running。
    animation-fill-mode: 规定对象时间之外的状态。

    CSS3 过渡 —— Transition

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

    要实现这一点,必须规定两项内容:

    规定您希望把效果添加到哪个 CSS 属性上
    规定效果的时长
    
    属性 描述
    transition: 简写属性,用于在一个属性中设置四个过渡属性。
    transition-property: 规定应用过渡的CSS属性的名称。
    transition-duration: 定义过渡效果话费的时间。默认是0。
    transition-timing-function: 规定过渡效果的时间曲线。默认是”ease”。
    transition-delay: 规定过渡时间何时开始。默认是0。
    div{
        width:100px;
        height:100px;
        background-color:yellow;
        transition:width 2s, height 2s, 
    }

    CSS3 转换 —— Transform

    属性 描述
    transform: 向元素应用 2D 或 3D 转换。
    transform-origin: 允许改变被转换元素的位置。
    transform-style: 规定被嵌套元素如何在 3D 空间中显示。
    none: 定义不进行转换。
    translate(x,y): 定义 2D 转换。
    translate3d(x,y,z): 定义 3D 转换。
    scale(x,y): 定义 2D 缩放。
    scale3d(x,y,z): 定义 3D 缩放。
    rotate(angle): 定义 2D 旋转,在参数中规定角度。
    rotate3d(x,y,z,angle): 定义 3D 旋转。
    展开全文
  • CSS 3动画

    千次阅读 2017-04-14 14:13:02
    .rotation { visibility: visible; -webkit-animation: rotation 0.6s forwards; -moz-animation: rotation 0.6s forwards; animation: rotation 0.6s forwards;
            .rotation {
                visibility: visible;
                -webkit-animation: rotation 0.6s forwards;
                -moz-animation: rotation 0.6s forwards;
                animation: rotation 0.6s forwards;
            }
    
            @-webkit-keyframes rotation {
                0% {
                    -webkit-transform: rotate(0deg);
                }
                100% {
                    -webkit-transform: rotate(90deg);
                }
            }

    变化函数:

    旋转九十度
    rotate(90deg)

    Y轴移动100px
    translateY(100px)

    X轴移动100px
    translateX(100px)

    x轴缩放1.2倍,y轴缩放0.8倍
    scale(1.2,0.8)

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,092
精华内容 8,836
关键字:

css3动画