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

    2020-02-29 19:48:12
    首先我们要探讨css3中的动画属性: 首先我们区分好transition 和 animation的区别 transition需要事件进行触发 ...之后我们在需要进行动画的元素里添加好属性aimation:即可 在这里我们先解释下animat...

    首先我们要探讨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度
    在这里插入图片描述

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

    展开全文
  • 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(匀速) 动画延迟的时间
    展开全文
  • css3动画animation 特点:不需要事件触发,调用“关键帧”即可。 关键帧:计算机动画术语, 帧——就是动画中最小单位单幅影像画面,相当于电影胶片上每一格镜头。在动画软件时间轴上帧表现为一格或一个标记...

    css3动画:animation
    特点:不需要事件触发,调用“关键帧”即可。

    关键帧:计算机动画术语, 帧——就是动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建,叫做过渡帧或者中间帧。

    制定关键帧
    第一种写法:

    @keyframes     关键帧名称(自行取){
    
    		from{	初始状态       }
    		to{       结束状态     }
    		}
    

    第二种写法:

    @keyframes     关键帧名称(自行取){
    			0%{    初始状态  }
    			25%{   运行时间到25%的状态  }
    			50%{   运行到50%的状态   }		
    			75%{    运行到75%的状态  }
    			100%{   运行到100%的状态 }
    
    	(里面的数值都是自行分配的!!)
    

    我们先介绍一下animation的属性值有哪些、再来导入关键帧。

    animation-timiag-fuction(动画的类型):
    cinear、ease、ease-in、step-starty(没有动画的效果,直接跳到下一帧动画的状态!)
    animation-name :关键帧的名称。
    animation-duration: 动画的持续时间。
    amimation-timing-function:动画运行的类型(匀速,加速,减速,贝塞尔曲线)
    animition-iteration-count:运动的次数。(默认状态下为1次)
    属性1:infinite(无限循环)
    属性2:reverse(反方向运行)
    属性3:alternate(先正常运行再反向运行,持续交替)
    属性4:alternate-reverse(先反向运行再正常运行,持续交替)
    animation-play-state
    属性1:paused(暂停)
    属性2:running(运动)

    常用的写法:animation:关键帧名称(空格隔开)动画时间 运行类型 延迟时间… ( 中间的属性不分顺序 !)

    简单的运用一下:

    style>
    *{ margin: 0; padding: 0;
    .box{ width: 400px;
    height: 400px;
    background: pink;
    margin: 0 auto;
    position: relative;
    }
    h2{ width: 100px;
    height: 100px;
    background: green;
    position: absolute;
    animation: h2late 5s infinite linear;
    }
    @keyframes h2late{
    0%{ left:0;top: 0; }
    25%{ left: 300px;top: 0; }
    50%{ left: 300px;top: 300px; }
    75%{ left: 0;top: 300px; }
    100%{ left: 0;top: 0; }
    }

    格式:

    <body>    
        <div class="box">      
             <h2></h2>
         </div>
    </body>
    

    这样就可以在页面中呈现一个移动的小格子了。

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

    2020-02-29 13:51:44
    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-02 13:23:41
    2、animation-duration:动画持续时间 3、animation-timing-function:动画运动类型(匀速liner、加速、减速、贝塞尔曲线…) 4、animation-delay:动画延迟时间 5、animation-iteration-count:运动次数(默认情况为1...
  • 想到有哪些内容?1.这个动画经历了多长时间2.这个动画怎么动?从上往下?还是从左往右?3.这个动画动几次?无限次吗?4.动画如果结束运动了,最后状态是什么?好,就上面问题。1.这个动画经历了多长时间?也...
  •   Android动画分类   市面上的很多APP都用到动画效果,动画效果用的好...那么Android系统都有哪些机制的动画呢?  1.逐帧动画(frame-by-frame animation)。逐帧动画的工作原理很简单,其实就是将一个完整的...
  • animation动画

    2019-10-05 14:10:29
    CSS animation动画 1.transform: rotate3d...2.animation有哪些属性呢。 animation 属性是一个简写属性,用于设置六个动画属性animation-name 规定需要绑定到选择器 keyframe 名称。。 anim...
  • animation属性类似于transition,他们都是随着时间改变元素属性值, 其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件情况下,也可以显式随时间变化来...
  • 初学animation 什么是animation?...有哪些具体属性 CSS animation 属性animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-...
  • 一直都很喜欢 github 哪些看起来很炫酷控件,...Android 的动画分三种,补间动画(Tween Animation)、帧动画(Drawable Animation)、属性动画(Property Animation),有的面试题会问到 Android 动画分几种,有的
  • 一、认识Android中有哪些动画 Android中有两种动画: 补间动画(Tween animation) 帧动画(Frame animation) 二、什么是补间动画 补间动画包含4中,即我们常见: AlphaAnimation (透明度动画) ...
  • 这篇文章记录了自己排查动画问题时思路,最后解决一些侥幸,也是因为最近刚好学习了部分安卓代码,技术视野稍微开阔了些... 因为页面并不复杂,所以看到页面动画卡顿之后,能够很快速猜想到是哪些css属性引...
  • css平常使用的属性

    2020-11-03 14:58:11
    css属性有哪些并简述属性 动画 animation-duration 检索或设置对象动画的持续时间 animation-timing-function 检索或设置对象动画的过渡类型 animation-delay 检索或设置对象动画的延迟时间 animation-iteration-...
  • 这篇文章记录了自己排查动画问题时思路,最后解决一些侥幸,也是因为最近刚好学习了部分安卓代码,技术视野稍微开阔了些... 因为页面并不复杂,所以看到页面动画卡顿之后,能够很快速猜想到是哪些css属性引...
  • 一定时间之内,一组css属性变换到另一组属性的动画展示过程。 属性: transition-property:动画展示哪些属性,可以使用all关键字; transition--duration:动画过程多久; transition-timing-function:linear...
  • css3里的动画元素

    2020-03-08 18:36:41
    CSS3的动画元素 相信学习了HTML同学对动画元素一定是不陌生了。...那我们就来看看他们相同点和不同点都有哪些animation VS transtion(位移) 相同点:都是随着时间改变属性。 不同点:transtio...
  • 这是笔者整理个人在CSS3动画上遇到问题,全部都是笔者个人经验,以及解决...首先先来复习一下animation的有哪些属性属性名 默认 作用 animation-name none keyframe 名字 animation-duration ...
  • 本篇文章总结在CSS3动画上遇到问题,6种...首先先来复习一下animation的有哪些属性属性名 默认 作用 animation-name none keyframe 名字 animation-duration 0s 运行总时长 animation-timing-fun...
  • 安卓的动画效果分析

    2016-03-28 17:41:38
    要写一个美观的app,出了遵守良好的设计规范,比如material design规范以外,动画效果也是非常大的一个领域。如果动画效果得当,你的...这类动画的原理相对简单,就是在drawable文件下建立一个animation-list属性的文
  • css3有哪些新特性?

    2019-10-04 16:43:23
    新选择器,属性选择器、伪类选择器、层次选择器... 圆角属性border-radius font-face加载服务器端字体 多列布局column 阴影shadow 弹性盒flex 过渡transition 动画animation 媒体查询@media 转载于:...
  • 首先我们来了解一下Web有哪些动画形式 1\. CSS3动画 Transform(变形) Transition(过渡) Animation动画) 2\. JS动画(操作DOM、修改CSS属性值) 3\. Canvas动画 4\. SVG动画 5\. 以Three.js为首...
  • 动画与转场,个人认为在概念上并不复杂,只是在代码组织和形式上比较复杂,因此我尝试先讲讲概念,再讲讲实现,让思绪...那么要完成一个动画,我们只需要确定三点:动画有多久、动画涉及到哪些 view 、这些 view ...
  • HTML实现动画

    2020-06-19 17:17:43
    很多前端新入门同学都不太懂如何去实现一个简单的动画,比如轮播图效果等,当初我也是,初学者还不知道有组件库这东西,什么效果都是自己去写,又不懂得如何写,只能去找,有不知道有哪些方法,如 animation 和 ...
  • 实习杂记(28):PropertyAnimation学习

    千次阅读 2016-07-03 17:58:28
    android中的属性动画,就是对 View对象 在属性上 随着时间变化而 改变产生动画效果, 首先必须要理解是 基于属性的, 是...所以第一步是要知道View结构,第二步是要理解View 或者自定义View有哪些属性, 首
  • 本篇文章总结在CSS3动画上遇到问题,6种...首先先来复习一下animation的有哪些属性属性名 默认 作用 animation-name none keyframe 名字 animation-duration 0s 运行总时长 animation-timing-fun...
  • 但是在api中没有任何关于可以使用哪些属性的描述。倒是在http://react-component.github.io/tween-one/里会有有些许描述。既然是官网,能对api文档个详细描述也能让我们更好学习。</p><p>该提问来源于...

空空如也

空空如也

1 2 3
收藏数 48
精华内容 19
关键字:

动画的animation属性有哪些