精华内容
下载资源
问答
  • css动画属性有哪些

    2020-02-29 15:42:20
    前言 ...css动画结合属性有: transform(动画变形属性) transition(动画过渡属性) animation(帧动画属性) 一:transform动画变形属性 在平面空间也就是2d空间中的transform动画变形属性: 1)2d的变换...

    前言
    最近在逆战班学习了css动画属性,开始感觉还是不错滴,但过了几天有点忘记了,就再次翻了翻笔记整理了一下,希望能加深印象。有错的地方希望能够指点指点。
    css动画结合属性有: transform(动画变形属性)
    transition(动画过渡属性) animation(帧动画属性)
    一:transform动画变形属性
    在平面空间也就是2d空间中的transform动画变形属性:
    1)2d的变换:
    在平面进行位置的移动 transform:translate()
    在平面进行旋转 transform:rotate()
    在平面进行缩放 transform:scale()
    在平面进行倾斜 transform:skew()
    2)2d位移
    transform:translate(参数1,参数2)
    参数1:水平方向移动的距离
    参数2:垂直方向移动的距离
    参数的设置:如果是正值的情况下:往右往下 负值:往左往上
    注意:参数表示坐标值,第二个参数可选,若省略默认为0px
    单独设置X/Y的位移:
    transform:translateX(水平方向移动的距离);
    transform:translateY(垂直方向移动的距离);
    3)2d缩放:
    transform:scale(参数1,参数2); (0 -
    0.999999 缩小 大于1 放大)
    参数1:水平方向缩放的比例
    参数2:垂直方向缩放的比例
    :如果两个参数相同的情况下 直接写一个。
    单独设置X Y
    transform:scaleX(水平方向缩放的比例);
    transform:scaleY(垂直方向缩放的比例);
    4)2d旋转:
    transform:rotate(旋转的角度); 旋转的是一个度数 deg
    :默认情况下绕着元素中心点进行转动
    5)2d倾斜:
    transform:skew(参数1,参数2); deg(度数单位)
    参数1:水平方向的倾斜角度
    参数2:垂直方向的倾斜角度
    注意:参数表示倾斜角度,第二个参数可选,若省略默认为不倾斜
    单独设置围绕某个轴(X Y)
    transform:skewX(度数)
    transform:skewY(度数)
    6)2d变形原点:(默认是以元素的中心点为基准点进行变形的)
    transform-origin:水平方向 垂直方向
    可以如下三种方式设置变形原点位置:left center(用表示位置的单词设置)或10px 10px(直接数值设置)或50%(百分比设置)
    : 如果transform:有两个功能函数:先写位移 再写旋转
    在三维空间也就是3d空间中的transform动画变形属性
    在这里插入图片描述
    3D功能函数:
    1)3D的位移:
    transform:translate3D(x,y,z);
    translateX(移动的距离) 沿着x轴移动
    translateY(移动的距离) 沿着y轴移动
    translateZ(移动的距离) 沿着z轴移动
    :沿着z轴移动的距离不能是百分比,x轴和y轴可以为百分比。
    2)3D的旋转:
    transform:rotate(旋转角度);
    rotateX(旋转角度) 沿着x轴方向旋转
    rotateY(旋转角度) 沿着y轴方向移动
    rotateZ(旋转角度) 沿着z轴方向旋转(默认情况效果类似)
    rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]

    • x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
    • y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
    • z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
      - a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
      :直接写rotate(旋转角度)与沿着z轴方向旋转、平面旋转效果一样
      3)3D缩放:
      transform:scale3d(x,y,z); x,y,z为一个数值(0 -0.999999缩小 大于1 放大)
      scaleX(缩放大小) x轴缩放
      scaleY(缩放大小) y轴缩放
      scaleZ(缩放大小) z轴缩放
      4) css3-景深!(3D空间!)
      观察物体的一视角距离.产生近大远小的效果。
      语法:
      perspective: 1200px;(一般都是在父元素中使用)
      transform:perspective(1200px) (在子元素中使用)
      注:两个都设置会发生冲突,建议只设置父元素,通常的数值在900-1200之间
      如果当你的视线距离物体足够远的时候,基本上就不会有近大远小的感觉
      设置视觉角度:
      persperctive-origin: left top(表位置单词) / 50% 50%(百分比) / 0px 0px(数值)
      让当前形成一个3D舞台,让其子元素在3D空间里面进行一个变换:
      语法
      transform-style:preserve-3d /
      flat(默认值:平面空间);
      二:transform过渡属性
      css3过渡属性:
    1. transition-property:检索或设置对象中的参与过渡的属性
    2. transition-duration:检索或设置对象过渡的持续时间
    3. transition-delay:检索或设置对象延迟过渡的时
    4. transition-timing-function:检索或设置对象中过渡的动画类型适用于所有元素以及:before和:after伪元素。
      简写方法:
      transition: 属性值1 属性值2 属性值3 属性值4
      属性值1:
      需要参与过渡属性 all ( 能支持过渡属性的都会过渡变换 默认值)
      属性值2:
      过渡的时间 s秒 ms 毫秒
      属性值3:
      延迟的时间 s秒 ms 毫秒
      属性值4:
      过渡动画的效果,默认值为ease
      取值简单说明如下:
      ease : 先快后慢
      linear :匀速
      ease-in:逐渐加快
      ease-out:逐渐变慢
      ease-in-out:先快后慢
      cubic-bezier:特殊的立方贝塞尔曲线效果
      :transition 必须通过鼠标事件触发(鼠标滑过 )
      三animation帧动画属性
      animation:不需要事件进行触发。调用关键帧即可
      制定关键帧:
      @keyframes 关键帧的名称{
      from{} 起始效果
      to{} 动画后的效果

      0%{
      //开始状态
      }
      25%{
      }
      50%{
      }

      100%{
      //结束状态
      }
      }
      animation: 复合属性
      animation-name 关键帧的名称
      animation-duration 动画的持续的时间
      animation-timing-function 动画运用的类型(匀速linear、加速度、减速度、贝塞尔曲线)
      animation-delay 动画的延迟
      animation-iteration-count 动画运动的次数(默认情况下运动1次) infinite(无限循环)
      animation-direction 运动的方向
      属性值:
      - reverse:反方向运行 ( 让关键帧从后往前执行 )
      - alternate:动画先正常运行再反方向运行,并持续交替运行
      - alternate-reverse:动画先反运行再正方向运行,并持续交替运行
      animation-play-state
      属性值: paused暂停 running运动
      常用的写法:
      animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间
    展开全文
  • css动画属性有哪些

    2020-02-29 13:51:44
    css动画属性 1 动画的名称 ,设置对象所应用的动画名称,需要调用关键帧来使用 关键帧: 关键帧的表示方法 1.可以使用from和to @keyframes 关键帧的名称{ from{初始状态属性} to{结束状态属性} } 2.可以用百分比...

    css动画

    css中动画叫做animation
    它的特点:不需要事件进行触发,配合调用关键帧即可。

    css动画属性

    1 动画的名称 ,设置对象所应用的动画名称,需要调用关键帧来使用
    关键帧:
    关键帧的表示方法

    1.可以使用from和to
    @keyframes 关键帧的名称{
               from{初始状态属性}
    			to{结束状态属性}
    }
    2.可以用百分比来划分多个步骤
    @keyframes 关键帧的名称{
               0%{
                    开始状态
                }
                25%{
    
                }
                50%{
    
                }
                ......
                100%{
                    结束状态
                }
               }
    

    在这里插入图片描述
    2 animation-duration 动画的持续的时间

    即设置对象动画的持续时间
    例如:
    animation-duration:3s; 即动画完成使用的时间为3s
    
    举例:下方div为父元素,h1为子元素,完成动画的时间为3s,匀速运动,无线循环
    

    在这里插入图片描述
    在这里插入图片描述
    3 nimation-timing-function 动画运用的类型

    即设置对象动画的过渡类型
    ①linear:匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
    ②ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 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)
    ⑥step-start:马上跳到动画每一结束桢的状态:没有动画中间的过渡效果。每次直接跳到下一帧开始的地方
    
    举例:
    下方为step-start 逐帧动画的显示,截取一小段代码:
    

    在这里插入图片描述
    在这里插入图片描述
    4 animation-delay 动画的延迟

    即设置对象动画延迟的时间
    例如:
    animation-delay:1s; 动画开始前延迟的时间为1s
    

    玫瑰心型的逐渐往外扩放

    5 animation-iteration-count 动画运动的次数

    即设置对象动画的循环次数
    
    ①number: 动画运动循环的次数(默认情况下运动1次)
    例如: 
    animation-iteration-count: 3;即动画运动三次
    
    ②infinite(无限循环)
    例如:
    animation-iteration-count: infinite;即动画会无限循环展示
    
    举例:下方为球体的无线循环转动
    

    球体的不断循环转动
    6 animation-direction 运动的方向

    设置对象动画在循环中是否反向运动
    
    ①reverse:反方向运行 ( 让关键帧从后往前执行 )
    ②alternate:动画先正常运行再反方向运行,并持续交替运行
    ③alternate-reverse:动画先反运行再正方向运行,并持续交替运行
    ④normal:正常方向
    
    举例:截取小段css代码
    		h1{
                position: absolute;
                width: 50px;
                height: 50px;
                background: salmon;
                border-radius: 100%;
                animation: h1move 5s linear reverse infinite;
            }
            reverse:反方向运行
    

    在这里插入图片描述
    7 animation-play-state

    即设置对象动画的状态
    
    ①running:运动
    ②paused: 暂停
    例如:
    animation-play-state:paused; 当鼠标经过时动画停止,鼠标移开动画继续执行
    
    展开全文
  • CSS3动画属性有哪些

    2020-03-08 21:32:26
    CSS动画属性 CSS动画分为2d动画和3d动画 过渡 transition:属性值(s);特点:需要事件进行触发。 2D变形属性:transform 2d位移:transform:translate(参数1,参数2) 参数1:在X轴移动的距离。 参数2:在Y轴移动...

    CSS动画属性
    CSS动画分为2d动画和3d动画

    过渡 transition:属性值(s);特点:需要事件进行触发。

    2D变形属性:transform

    2d位移:transform:translate(参数1,参数2)

    • 参数1:在X轴移动的距离。 参数2:在Y轴移动的距离
    • 参数的设置:如果是正值的情况下:往右往下 负值:往左往上
    .box{
                width:500px;
                height:400px;
                margin:100px auto;
                background:orange;
            }
            h2{
                width:100px;
                height:100px;
                background:blue;
                /* 过渡属性 */
                transition:1s;
            }
            /* h2进行位置的移动 */
            .box:hover h2{
                transform:translateX(200px);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h2></h2>
        </div>
    </body>
    

    2d缩放:transform:scale(参数1,参数2); (0 - 0.999999 缩小 大于1 放大)

    • 参数1:X轴缩放的比例 。参数2:Y轴缩放的比例
    • 注:如果两个参数相同的情况下 直接写一个。
      .box{
                width:500px;
                height:400px;
                background:orange;
                margin:50px auto;
            }
            h2{
                width:100px;
                height:100px;
                background:blue;
                transition:1s;
            }
            /* 交互 */
            .box:hover h2{
                transform:scaleY(2);
            }
    

    2d旋转: transform:rotate(); 旋转的是一个度数 deg

    • 默认情况下:绕着中心点进行转动
     .box{
                width:500px;
                height:400px;
                background:orange;
                margin:40px auto;
            }
            h2{
                width:50px;
                height:200px;
                background:blue;
                transition:1s;
            }
            .box:hover h2{
                transform:rotateX(60deg);
            }
    

    2d倾斜:transform:skew(); deg

      .box{
                width:500px;
                height:400px;
                background:#ccc;
                margin:50px auto;
            }
            h2{
                width:200px;
                height:100px;
                background:red;
                /* 过渡属性 */
                transition:1s;
            }
            /* 鼠标滑过 */
            .box:hover h2{
                transform:skew(30deg,20deg);
            }
    

    CSS3D

    transform-style:preserve-3d 形成一个3D空间:( 让父元素形成3D,让其子元素在3D空间进行变化 )

    • 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴
    • 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴
    • Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向

    3D功能函数
    变形属性: transform:

    • 3D的位移:
      transform:translate(x,y,z);
      translateX()、 translateY()、 translateZ()

    • 3D的旋转:
      transform:rotate();
      rotateX()、 rotateY()、rotateZ() //默认情况效果类似
      rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
      - x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
      - y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
      - z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
      - a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

     .box{
                width:500px;
                height:400px;
                background:orange url(./images/1.jpg);
                background-size:100% 100%;
                margin:100px auto;
                /* 形成3D空间 */
                transform-style:preserve-3d;
                transform:rotateY(50deg);
            }
            h2{
                width:200px;
                height:200px;
                background:blue url(./images/2.jpg);
                background-size:100% 100%;
                transition:1s;
            }
            .box:hover h2{
                transform: rotateX(60deg);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h2></h2>
        </div>
    </body>
    
    • 3D缩放:
      transform:scale3d(x,y,z);
      scaleX()、 scaleY()、scaleZ()


      动画: animation; 特点:不需要事件进行触发。调用关键帧即可
      常用的写法: animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间

       animation-name   关键帧的名称
       animation-duration   动画的持续的时间
       animation-timing-function   动画运用的类型(匀速linear、加速度、减速度、贝塞尔曲线)
       animation-delay  动画的延迟
       animation-iteration-count   动画运动的次数(默认情况下运动1次) infinite(无限循环)
       animation-direction  运动的方向
               属性值:
                   - reverse:反方向运行 ( 让关键帧从后往前执行 )
                   - alternate:动画先正常运行再反方向运行,并持续交替运行
                   - alternate-reverse:动画先反运行再正方向运行,并持续交替运行
       animation-play-state 
               属性值:
                   paused暂停
                   running运动
      

    制定关键帧:

        @keyframes 关键帧的名称{
           选择符名{}
            0%{
                //开始状态
            }
            25%{
            }
            50%{
            }
            ......
            100%{
                //结束状态
            }
        }
    

    animation 和@keyframes 自动循环动画代码如下

     .box{
                width:800px;
                height:500px;
                background:orange;
                margin:50px auto;
                position:relative;
            }
            h2{
                width:100px;
                height:100px;
                background:blue;
                position:absolute;
                left:0;top:0;
                /* 用animation 调用关键帧 */
                animation:h2Move 3s infinite;
            }
            /* 鼠标滑过动画暂定 */
            /* .box:hover h2{
                
                animation-play-state:paused;
            } */
    
            /* 制定关键帧 */
            @keyframes h2Move{
                0%{
                    left:0;top:0;
                }
                25%{
                    left:700px;top:0;
                }
                50%{
                    left:700px;top:400px;
                }
                75%{
                    left:0;top:400px;
                }
                100%{
                    left:0;top:0;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h2></h2>
        </div>
    </body>
    
    展开全文
  • css的动画属性有哪些

    2020-02-29 19:48:12
    首先我们要探讨css3中的动画属性: 首先我们区分好transition 和 animation的区别 transition需要事件进行触发 而animation 不需要事件触发,调用关键帧即可。 如何创建一个动画: 首先我们在css样式中先制定关键帧...

    首先我们要探讨css3中的动画属性:
    首先我们区分好transition 和 animation的区别
    transition需要事件进行触发
    而animation 不需要事件触发,调用关键帧即可。
    如何创建一个动画:
    首先我们在css样式中先制定关键帧:

    解析:首先form是开始状态,
    to到结束状态
    之后我们在需要进行动画的元素里添加好属性aimation:即可
    在这里我们先解释下animation属性,后续再举例进行分析
    animation: 复合属性

        animation-name   关键帧名称
        animation-duration 动画持续时间
        animation-timing-function  动画运动的类型  (匀速linear)
        animation-delay  动画延迟的时间
        animation-iteration-count 动画运动的次数   infinite(无限循环)
        animation-direction  运动的方向
                属性值:
                    normal:正常方向
                    reverse:反方向运行
                    alternate:动画先正常运行再反方向运行,并持续交替运行
                    alternate-reverse:动画先反运行再正方向运行,并持续交
                    替运行
        animation-play-state
                属性值:
                    running:运动
                    paused: 暂停
    
    
    
    
    常用的写法:
        animation:关键帧的名称  动画运动的时间  linear(匀速)
    

    在这里我们进行举例分析:
    例子1:如何创建一个立方体动画:

    在这里插入图片描述
    //这里我们创建父元素,给父元素一个宽高
    //后续我们给父元素添加一个固定定位 让父元素处于居中位置
    //让父元素形成3D空间
    //让元素沿X,Y轴进行转动 以便于观察
    //添加关键帧到父元素中,设置好4s动画时间 以及infinite 无限循环 normal正常方向
    }

        .box div{
            width: 300px;
            height: 300px;
            position: fixed;
            opacity: 0.5;
            border: 2px black solid;
           //给父元素中的子元素div添加好对应的宽高属性以及定位
           还有opacity半透明 以及边框
    

    在这里插入图片描述

            //给子元素cont1添加背景颜色 还有让子元素沿着z轴移动150px
            	以下对于其他cont1~6不作出其他解释
    

    在这里插入图片描述
    //制定关键帧 让元素转动360度
    在这里插入图片描述

    以上即为动画属性的解释,后续有补充

    展开全文
  • css3动画属性有哪些

    2020-03-02 13:23:41
    css3动画属性如下: 1、animation-name:关键帧名称 2、animation-duration:动画持续的时间 3、animation-timing-function:动画运动类型(匀速liner、加速、减速、贝塞尔曲线…) 4、animation-delay:动画延迟时间 5...
  • 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
  • css3动画属性与过渡属性有所不同,他不需要事件触发,调用关键帧即可。 制作动画时我们需要先制定关键帧 @keyframes 关键帧的名称{ from{ 开始状态 } to{ 结束状态 } } 比较繁琐的动画可采用如下方法指定关键帧: @...
  • 2D的动画属性 什么是2D? 二维的平面空间 一、变形属性:transform transform:translate() 在平面进行位置的移动(单位为px) transform:translate(参数1,参数2) 参数1:在X轴移动的距离 参数2:在Y轴移动的...
  • css3动画:animation 特点:不需要事件触发,调用“关键帧”即可。 关键帧:计算机动画术语, 帧——就是动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记...
  • CSS3中的动画属性 1)关键帧的制定 不同于过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧的话来说,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键...
  • 我在java中制作了一个基本的蛇游戏,我需要一些帮助来获得更流畅的动画.蛇的每个部分都是20×20的正方形,所以我让蛇以每个刻度20像素的步长移动.这使得蛇似乎在网格上移动,这意味着它将始终与仅在“网格”上产生的...
  • 一个动画是由很多帧组成的,因为人眼的暂留特性,当图片交替的速度大于每秒 30 帧以上既有动画的感觉。实现方式gif 图像形式存储,容量大,需第三方制图工具制作。flash 需要第三方制作工具,不推荐。CSS3 实现动画...
  • C3有哪些新增的属性

    2020-07-19 09:38:38
    css3的新增属性有哪些? 颜色rgba 渐变linear-gradient radial-gradient 背景background-size background-origin background-clip 文字阴影text-shadow 边框阴影border-shadow 圆角边框border-radius 边框图片...
  • Android属性动画

    千次阅读 2015-03-03 12:02:07
    什么是Android属性动画? 与之相似的技术有哪些? 属性动画的组成部分详情及使用
  • 7、canvas有哪些属性

    2021-02-26 15:07:27
    canvas什么是canvas常用的方法1....动画14.合成15.clip()剪切路径16.获取上下文的像素数据17.将像素数据绘制到上下文中18.保存图像19.命中区域20.聚焦环21.基于canvas封装的代码片段(https://developer.mozilla.org/e

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 267
精华内容 106
关键字:

动画属性有哪些