animation_animation动画 - CSDN
  • css3 animation动画

    2020-06-07 01:16:29
    animation <a href="javascript:;" class="more"><img src="images/00-more.png" alt=""></a> @keyframes more{ from { transform: translateY(-30px); } to { transform: translateY(0px...

    animation

    <a href="javascript:;" class="more"><img src="images/00-more.png" alt=""></a>
    
    @keyframes more{
    	from {
    		transform: translateY(-30px);
    	}
    	to {
    		transform: translateY(0px);
    	}
    }
    
    .more{
    	position: fixed;
    	bottom: 40px;
    	right: 80px;
    	z-index: 1;
    	animation: more 1.5s infinite alternate;
    }
    
    .more img{
    	width: 174px;
    	height: 61px;
    }
    

    最常用的几种属性有以下几种:

    1、animation-name(动画名称)

    animation-name属性是必须存在的,因为animation-name的值默认是none,没有动画。

    2、animation-duration(动画执行一次所需时间)

    animation-duration属性也是必须存在的,因为animation-duration的值默认是0,没有动画。

    3、animation-delay(动画在开始前的延迟时间)

    animation-delay的值可以是秒(s)或者是毫秒(ms),默认值是0,没有延迟。

    4、animation-timing-function(动画以何种运行轨迹完成一个周期)

    animation-timing-function的值是贝塞尔曲线,默认值是ease,表示动画以低速开始,然后加速,最后在结束前变慢。 最常用的值有以下几个:

    (1)linear:表示动画从头到尾的速度都是相同的。

    (2)ease-in:表示动画以低速开始。

    (3)ease-out:表示动画以低速结束。

    (4)ease-in-out:表示动画以低速开始和结束。

    如果没有想用的值,也可以直接使用三次贝塞尔函数,使用网站是http://cubic-bezier.com,可直接调试出自己想要的值;也可以在浏览器中直接调试,现在浏览器调试工具中都支持贝塞尔函数可视化调试。

    5、animation-iteration-count(动画播放次数)

    animation-iteration-count属性值有两种:

    (1)直接写数字,自定义想要播放动画的次数。

    (2)infinite:设置动画无线循环播放。

    6、animation-fill-mode(定义元素动画结束以后或者未开始的元素样式)

    默认值为none,标示,不会在动画结束或者未开始时给元素 添加样式

    常用属性值为:

    (1)forwards:表示动画结束后,元素直接接使用当前样式。

    (2)backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值(当animation-direction为reverse或者alternate-reverse时)

    7、animation-direction(是否轮流反向播放动画)

    默认值是normal,动画正常播放。如果动画只播放一次,则该属性无效。

    常用的属性值为:

    (1)reverse:表示动画反向播放。

    (2)alternate:表示动画在奇数次播放时为正向播放,为偶数次播放时为反向播放。

    (3)alternate-reverse: :表示动画在奇数次播放时为反向播放,为偶数次播放时为正向播放。

    animation属性在书写通常合并在一起,除非需要单独设置的属性值,animation属性的简写形式为:animation:code 2s 2s linear infinite alternate forwards;

    展开全文
  • animation动画

    2020-06-28 15:05:01
    1.过渡(transition) 通过过渡可以指定一个属性发生变化时的切换方式 transition-property: 指定要执行过渡的属性 多个属性间使用,隔开 如果所有属性都需要过渡,则使用all关键字 大部分属性都支持过渡效果,注意...

    1.过渡(transition)

    通过过渡可以指定一个属性发生变化时的切换方式

    transition-property: 指定要执行过渡的属性
    多个属性间使用,隔开
    如果所有属性都需要过渡,则使用all关键字
    大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

     transition-property: height , width;  
     transition-property: all;    
    

    transition-duration: 指定过渡效果的持续时间
    时间单位:s 和 ms 1s = 1000ms

    transition-duration: 2s;
    

    transition-timing-function: 过渡的时序函数
    指定过渡的执行的方式
    可选值:

    • ease 默认值,慢速开始,先加速,再减速

    • linear 匀速运动

    • ease-in 加速运动

    • ease-out 减速运动

    • ease-in-out 先加速 后减速

    • cubic-bezier() 来指定时序函数
      https://cubic-bezier.com

    • steps() 分步执行过渡效果
      可以设置一个第二个值:
      end , 在时间结束时执行过渡(默认值)
      start , 在时间开始时执行过渡

     transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); 
     transition-timing-function: steps(2, start); 
    

    transition-delay: 过渡效果的延迟,等待一段时间后在执行过渡

    transition-delay: 2s;
    

    transition 可以同时设置过渡相关的所有属性

    2.动画

    动画和过渡类似,都是可以实现一些动态的效果,
    不同的是过渡需要在某个属性发生变化时才会触发
    动画可以自动触发动态效果
    设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤

    @keyframes test {
                /* from表示动画的开始位置 也可以使用 0% */
                from{
                    margin-left: 0;
                    background-color: orange;
                } 
    
                /* to动画的结束位置 也可以使用100%*/
                to{
                    background-color: red;
                    margin-left: 700px;
                }
    

    animation-name: 要对当前元素生效的关键帧的名字
    animation-duration: 动画的执行时间
    animation-delay:动画的延时
    animation-timing-function

    animation-iteration-count 动画执行的次数
    可选值:
    次数 animation-iteration-count: 1;
    infinite 无限执行

    animation-direction
    指定动画运行的方向
    可选值:
    normal 默认值 从 from 向 to运行
    reverse 从 to 向 from 运行
    alternate 从 from 向 to运行 重复执行动画时反向执行
    alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

    animation-play-state: 设置动画的执行状态
    可选值:
    running 默认值 动画执行
    paused 动画暂停
    animation-fill-mode: 动画的填充模式
    可选值:
    none 默认值 动画执行完毕元素回到原来位置
    forwards 动画执行完毕元素会停止在动画结束的位置
    backwards 动画延时等待时,元素就会处于开始位置
    both 结合了forwards 和 backwards

    变形

    指通过CSS来改变元素的形状或位置,不会影响到页面的布局
    transform 用来设置元素的变形效果

    • 平移
      translateX() 沿着x轴方向平移
      translateY() 沿着y轴方向平移
      translateZ() 沿着z轴方向平移
      平移元素,百分比是相对于自身计算的
    transform: translateX(100%);
    
    <div class="box3">
            aaaa
    </div>
    .box3{
                background-color: orange;
                position: absolute;
                /* 
                    这种居中方式,只适用于元素的大小确定
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto; */
    
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
    

    z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离
    距离越大,元素离人越近
    z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果
    必须要设置网页的视距

    html{
                /* 设置当前网页的视距为800px,人眼距离网页的距离 */
                perspective: 800px;
            }
    
    • 旋转

    可以使元素沿着x y 或 z旋转指定的角度
    rotateX()
    rotateY()
    rotateZ()

    transform: rotateZ(.25turn); 
    transform: rotateY(180deg) translateZ(400px); 
    transform: translateZ(400px) rotateY(180deg);
    transform: rotateY(180deg);
    /* 是否显示元素的背面 */
    backface-visibility: hidden;
    
    • 变形
      对元素进行缩放的函数:
      scaleX() 水平方向缩放
      scaleY() 垂直方向缩放
      scale() 双方向的缩放
    #变形的原点 默认值 center
    transform-origin:20px 20px; 
    
    :hover{ transform:scale(2) }
    
    展开全文
  • CSS3(三)Animation 入门详解

    万次阅读 多人点赞 2019-11-17 19:19:09
    Animation 前言 好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。 下面是七喜的官方主页,它就是很好的富交互样例。鼠标移动...

    Animation


    前言

    好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。

    下面是七喜的官方主页,它就是很好的富交互样例。鼠标移动到导航栏,就会播放多种动效,给用户一种酷炫的体验。我觉得用户体验,才是前端工程师更加关注的问题,而不是一味追求Javascript的编码技能。

    这里写图片描述
    七喜官方网站

    个人网站

    Github 源码(欢迎Fork~~)


    Animation 组成

    CSS3 Animation 是由三部分组成。


    1.关键帧(@keyframes)

    • 关键帧(keyframes) - 定义动画在不同阶段的状态。
    • 动画属性(properties) - 决定动画的播放时长,播放次数,以及用何种函数式去播放动画等。(可以类比音视频播放器)
    • css属性 - 就是css元素不同关键帧下的状态。

    下面我们来看一个例子。
    创建了一个@keyframes命名为dropdown。

    • 关键帧主要分为3个阶段,0%、50%、100%。
    • 动画播放时长为6s、循环播放(infinite)、以linear方式进行播放。
    • 修改的元素属性为margin-top
    .list div:first-child {
     animation: dropdown 8s linear infinite;
    }
    @keyframes dropdown {
        0% { margin-top: 0px;}
       /** 暂停效果 */
       10% { margin-top: 0px;}
       50% { margin-top: -100px;}
       60% { margin-top: -100px;}
       90% { margin-top: -200px;}
      100% { margin-top: -200px;}
    }
    

    这里写图片描述

    查看源码
    MDN参考网站


    需要注意!当属性的个数不确定时:

    当我们在定义不同关键帧,元素属性的个数是一个变化的值。
    如果一个关键帧的属性,没有出现在其他关键帧的时候,那么这些属性将会使用上一帧的默认值。
    区别在于,缺省之后的渐变效果是不会出现的。比如下面两种写法,

      @keyframes dropdown {
        0% { top: 0; }
        30% { top: 300px; }
        50% { top: 150px; }
        70% { top: 300px; }
        80% { top: 0px;  left:-200px;}
        100% { top: 0px;  }
      }
    
    

    这里写图片描述

      @keyframes dropdown {
        0% { top: 0; left:0px;}
        30% { top: 300px; left:0px;}
        50% { top: 150px; left:0px;}
        70% { top: 300px; left:0px;}
        80% { top: 0px;  left:-200px;}
        100% { top: 0px;  left:0px;}
      }
    

    这里写图片描述


    语法

    @keyframes keyframes-name {
    [ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
    }
    keyframes-name
    帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
    from
    等效于 0%.
    to
    等效于 100%.

    2.动画属性

    动画属性可以理解为播放器的相关功能,一个最基本的播放器应该具有:播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。
    主要也分为两大点:

    • 指定播放的元素
    • 定义播放信息的配置
      这里写图片描述

    动画源码

    简写属性形式:

    animation:
    [animation-name] [animation-duration] // 动画的名称、持续时间
    [animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间
    [animation-iteration-count] [animation-direction] // 播放次数、播放顺序
    [animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

    MDN参考文档

    1.时间函数(animation-timing-function)

    animation-timing-function属性定义了动画的播放速度曲线。
    可选配置参数为:
    ease
    ease-in
    ease-out
    ease-in-out
    linear
    cubic-bezier(number, number, number, number)
    这里写图片描述
    动画源码
    默认值,如果没有显示写调用的函数,则默认为ease。

    2.动画方向(animation-direction)

    animation-direction属性表示CSS动画是否反向播放。
    可选配置参数为:

    single-animation-direction = normal | reverse | alternate | alternate-reverse

    • animation-direction: normal 正序播放
    • animation-direction: reverse 倒序播放
    • animation-direction: alternate 交替播放
    • animation-direction: alternate-reverse 反向交替播放
    • animation-direction: normal, reverse
    • animation-direction: alternate, reverse, normal

    这里写图片描述

    动画源码
    MDN文档

    3.动画延迟(animation-delay)

    animation-delay属性定义动画是从何时开始播放,即动画应用在元素上的到动画开始的这段时间的长度。
    默认值0s,表示动画在该元素上后立即开始执行。
    该值以秒(s)或者毫秒(ms)为单位。

    4.动画迭代次数(animation-iteration-count)

    animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。
    默认值只播放一次。

    single-animation-iteration-count = infinite | number

    5.动画填充模式(animation-fill-mode)

    animation-fill-mode是指给定动画播放前后应用元素的样式。

    single-animation-fill-mode = **none **| **forwards **| **backwards **| both

    • animation-fill-mode: none 动画执行前后不改变任何样式
    • animation-fill-mode: forwards 保持目标动画最后一帧的样式
    • animation-fill-mode: backwards 保持目标动画第一帧的样式
    • animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。
    6.动画播放状态(animation-timing-function)

    animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。
    默认值为running

    single-animation-timing-function = running | paused

    • running 动画正常播放
    • paused 动画暂停播放

    相关链接

    个人网站
    Github 源码

    SVG动画实践

    动画实践

    分享一些CSS3动效网站:

    Animation.css 一个很全的CSS3的动效库,可以尝试看看源码进行学习。
    CreateJS 里面的特效做得也很不错,有很多酷炫的样例。
    国外css3网页 布局很优雅的网站
    USAToday 也是一个很酷炫的国外网站
    peekabeat 很清爽的界面
    heartbeat 交互很棒的网站
    dances 貌似是交响乐的网站主页
    reative 很有时代感的网站
    animation 在线animation编辑器

    这里写图片描述

    展开全文
  • 目录1. 动画① 创建② 属性③ 关键帧2. 3D① transform转换② rotate3d③ translate3d④ perspective⑤ transform-style 1. 动画 ① 创建 @keyframes // 创建动画 语法: @keyframes animationname {keyframes-...

    1. 动画

    ① 创建

     @keyframes  // 创建动画
    

    语法:

    @keyframes animationname {keyframes-selector {css-styles;}}
    keyframes-selector // 动画持续时间的百分比
    

    例:

    @keyframes myMove{
       0%   {top:0px;}
       25%  {top:200px;}
       50%  {top:100px;}
       75%  {top:200px;}
       100% {top:0px;}
    }
    

    ② 属性

    animation // 动画属性的简写属性
    

    语法:

     animation:name duration timing-function delay iteration-count
    
    • name:动画名称
    • duration:动画指定需要多少秒或毫秒完成
    • timing-function:动画效果的速度
    • delay:延时
    • iteration-countvalue/infinite;动画播放次数
    • animation-direction: normal|alternate;是否反向播放动画
    • animation-play-state: paused|running;动画正在运行还是暂停

    ③ 关键帧

      animation-timing-function:step-start/step-end
    
    • 指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。
    • step-start 动画执行时为开始左侧,端点的部分为开始。
    • step-end 动画执行时以结尾端点为开始,默认值为 end。

    2. 3D

    ① transform转换

    语法:

    transform: rotate3d()/ translate3d()
    
    • rotate3d(x,y,z,angle):旋转
    • translate3d(x,y,z):平移

    ② rotate3d

    rotate3d(x,y,z,angle)
    
    • x: 在x轴是否旋转,是为1,否为0;
    • y: 在y轴是否旋转,是为1,否为0;
    • z: 在z轴是否旋转,是为1,否为0;
    • angle:旋转角度;
    • rotateX(angle) :定义沿 X 轴的 3D 旋转。正值前,负值后;
    • rotateY(angle) :定义沿 Y 轴的 3D 旋转。正值右,负值左;
    • rotateZ(angle) :定义沿 Z 轴的 3D 旋转。

    ③ translate3d

    • translate3d(x,y,z)
    • translateX(x):定义 3D 转化,仅使用用于 X 轴的值;
    • translateY(y):定义 3D 转化,仅使用用于 Y 轴的值;
    • translateZ(z):定义 3D 转化,仅使用用于 Z轴的值。

    ④ perspective

    perspective:设置从何处查看一个元素的角度

    语法:

     perspective: number|none;
    
    • number:元素距离视图的距离,以像素计;
    • none:默认值。与 0 相同。不设置透视;
    • Perspective-origin:视点;
    • perspective-origin:50% 50%;表示浏览器从正中心观察这个世界。

    ⑤ transform-style

    transform-style:规定被嵌套元素如何在 3D 空间中显示;

    语法:

    transform-style: flat|preserve-3d;
    
    • flat:表示所有子元素在2D平面呈现;
    • preserve-3d:表示所有子元素在3D空间中呈现。

    在这里插入图片描述

    展开全文
  • Animation的使用

    千次阅读 2016-08-28 21:38:12
    Animation(动画)有两种分类:补间动画(Tween)和帧动画(Frame) 补间动画主要有以下几种: 旋转(RotateAnimation) 平移(TranslateAnimation) 拉伸(ScaleAnimation) 透明度(AlphaAnimation) 实现的方式:...
  • Animation 组件

    2018-03-25 09:56:38
    Animation概述 Animation 组件,Animation类 //测试的结果是: //1、特别注意 XXQueue 这样的函数,如果遇到循环播放的动画 WrapMode.Loop , 因为默认情况 QueueMode.CompleteOthers,所以无法切换到其他动画...
  • Animation

    2019-07-05 14:34:22
    using the animation view the animation view is used to preview and edit animation clips for animated game objects in unity. to open the animation ...
  • animation

    千次阅读 2018-09-03 13:15:17
    animation: name duration timing-function delay iteration-count direction fill-mode play-state ; 定义和用法 animation 属性是一个简写属性,用于设置六个动画属性: animation-name ...
  • Animation四种动画详解

    2015-02-09 16:58:06
    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。... Andriod 的Animations可以从形式上分为两大类,分别是 Tweened Animations 和Frame-By-Frame ...
  • Android 属性动画(Property Animation) 完全解析 (上)

    万次阅读 多人点赞 2016-08-10 19:33:48
    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/380674751、概述Android提供了几种...View Animation相当简单,不过只能支持简单的缩放、平移、旋转、透明度基本的动画,且有一定的局限性。比如
  • 微信小程序把玩(四十)animation API

    万次阅读 多人点赞 2016-09-30 16:26:06
    wx.createAnimation(object) 看官方介绍1.创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 2.调用动画操作方法后要调用 step() 来表
  • 1.Animation Animation是一个抽象类,它本身和UI渲染没有任何关系,而它主要的功能是保存动画的插值和状态;其中一个比较常用的Animation类是Animation<double>。Animation对象是一个在一段时间内依次生成一...
  • 【Unity3D】3D模型的使用——FBX的使用与Animation设置

    万次阅读 多人点赞 2017-06-11 10:42:03
    FBX的使用与Animation设置是一个很有必要的技能,对于美工MM送过来的3D模型你应该懂得如何将其设置到游戏场景之中使用,不然真的羞死人的,这都不会。毕竟游戏里面许许多多的主角的动作都是一系列已经做好的3D动画,...
  • 在我们实际的开发过程中想要让animation在做每一次动画之前都停留几秒,我们应该怎么做呢? 首先笔者第一时间就看到了animation-delay属性,于是我就非常高兴的加上了!以为需求就OK了,但是我们发现,animation-...
  • Unity/Animation -- 添加动画事件(Animation Events)

    万次阅读 多人点赞 2017-06-04 19:57:11
    动画事件(Animation Events)是一种附属于Animation Clips 的事件,它们在动画发展到一定程度时触发,从而实现一些特殊的功能。熟悉怎么添加动画事件可以省去很多不必要的麻烦,而且它确实非常简单。
  • animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n,n,n,n),你平时用到的linear、ease、ease-out等都是...
  • animation参数以及用法

    千次阅读 2018-08-16 17:31:16
    ' animation-name '&gt;:检索或设置对象所应用的动画名称 &lt;' animation-duration '&gt;:检索或设置对象动画的持续时间 &lt;' animation-timing-function '&gt;:检索或设置对象动画的...
  • animation动画库 + animation用法

    千次阅读 2018-09-22 14:34:02
    1. animation.css https://daneden.github.io/animate.css/ 简单使用时,f12 审查元素 .cls 就可以查找对应的animation。 这个库最简单。 2. hover.css  http://ianlunn.github.io/Hover/ f12审查元素,选中...
  • 一个animation clip是可重用的帧集合,它以给定的帧率显示sprite。每一帧包含的texture和可选事件。Uni2D除了提供可视化来处理精灵动画,还提供了强大的API使得控制和监听动画。具体看看...
  • Unity3d之Animation(动画系统)

    万次阅读 2016-04-30 18:15:19
    创建游戏对象并添加Animation组件,然后将动画文件拖入组件。 2,代码控制动画 Play("ation 1" );,播放动画,传入参数为动画名字 Stop("ation 1") ,停止动画,传入参数为动画名字 CrossFade("ation 1", 0.5f); ,有...
1 2 3 4 5 ... 20
收藏数 191,788
精华内容 76,715
关键字:

animation