精华内容
下载资源
问答
  • 一、animation的语法 1、@keyframes——插入关键帧 (1)FormTo形式: CSS Code复制内容到剪贴板 @keyframes demo { from { Properties:Properties value; } Percentage { Properties:Properties ...
  • 在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是”Keyframes”,我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们...
  • animation-name属性为动画指定一个名称 animation-name兼容主流的浏览器,不过还是需要加前缀去兼容 animation-name有两个属性值,分别是keyframename和none <!DOCTYPE html> <html lang="en"> <head&...
  • 纯CSS3 animation属性实现GIF图片进度加载效果 纯CSS3 animation属性实现GIF图片进度加载效果
  • 代码简介:CSS3 Animation属性发光按钮代码,不兼容Firefox浏览器。
  • 纯css3 animation属性圆形动态时钟特效 纯css3 animation属性圆形动态时钟特效 纯css3 animation属性圆形动态时钟特效
  • CSS动画效果(animation属性)解析动画与变形和过渡的区别@keyframesanimation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性animation-direction...

    动画与变形和过渡的区别

    在CSS3中, 过渡 变形 只能设置元素的变换过程,并不能对过程中的某一环节进行精确控制,例如 过渡 变形 实现的动态效果不能够重复播放。为了实现更加丰富的动画效果,CSS3提供了 animation属性 ,使用 animation属性 可以定义复杂的动画效果。

    @keyframes

    在CSS3中,@keyframes规则用于创建动画。
    基本语法格式:
    @keyframes animationname { keyframes-selector{css-styles;} }

    animationname :表示 当前动画的名称 ,它将作为引用时的 唯一标识 ,因此不能为空。

    keyframes-selector 关键帧 选择器,即指定当前关键帧要应用到整个动画过程中的位置,值可以是一个 百分比 from 或者 to 。其中, from和0% 效果相同表示动画的开始, to和100% 效果相同表示动画的结束。

    css-styles :定义执行到当前 关键帧 时对应的 动画状态 ,由 CSS样式属性 进行定义,多个属性之间用 分号 分隔,不能为空。

    animation-name属性

    animation-name属性 用于定义要应用的 动画名称
    基本语法格式:

    animation-name: keyframename | none;

    animation-name 属性 初始值为 none ,适用于所有 块元素 行内元素 keyframename 参数用于规定需要绑定到 选择器 的keyframe的 名称 ,如果值为 none ,则表示不应用任何动画,通常用于覆盖或者取消动画。

    animation-duration属性

    animation-duration属性用于定义整个动画效果完成所需要的 时间,以 秒或毫秒计。
    基本语法格式:

    animation-duration: time;

    animation-duration 属性 初始值为 0,适用于所有 块元素和行内元素 。time参数是以秒(s)或者毫秒(ms)为单位的时间,默认值为0,表示没有任何 动画效果 。当值为负数时,则被视为0。

    animation-timing-function属性

    animation-timing-function 用来规定动画的 速度曲线 ,可以定义使用哪种方式来执行动画效果。
    基本语法格式:

    animation-timing-function:value;

    animation-timing-function 包括 linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) 等常用属性值。
    animation-timing-function的常用属性值如下:

    属性值描述
    linear动画从头到尾的速度是相同的。
    ease默认。动画以低速开始,然后加快,在结束前变慢。
    ease-in动画以低速开始。
    ease-out动画以低速结束。
    ease-in-out动画以低速开始和结束。
    cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。可能的值是从0到1的数值。

    animation-delay属性

    animation-delay属性用于定义执行动画效果之前 延迟的时间,即规定动画什么时候开始。
    基本语法格式:

    animation-delay:time;

    参数 time 用于定义动画开始前等待的时间,其单位是秒或者毫秒,默认属性值为0。 animation-delay属性 适用于所有的 块元素 行内元素

    animation-iteration-count属性

    animation-iteration-count属性用于定义动画的 播放次数

    基本语法格式:

    animation-iteration-count: number | infinite;

    animation-iteration-count属性 初始值为 1 ,适用于所有的 块元素和行内元素 。如果属性值为 number ,则用于定义播放动画的 次数 ;如果是 infinite ,则指定动画 循环播放

    animation-direction属性

    animation-direction属性 定义当前动画播放的方向,即动画播放完成后是否 逆向交替循环
    基本语法格式:

    animation-direction: normal | alternate;

    animation-direction 属性 初始值为normal,适用于所有的 块元素和行内元素 。该属性包括两个值,默认值normal表示动画每次都会正常显示。如果属性值是 “alternate” ,则动画会在 奇数次数 (1、3、5 等等)正常播放,而在 偶数次数 (2、4、6 等) 逆向播放

    animation属性

    animation属性 也是一个简写属性,用于综合设置以上六个动画属性。(用空格隔开)
    基本语法格式:

    animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

    使用 animation属性 时必须指定 animation-name animation-duration 属性,否则持续的时间为0,并且永远不会播放动画。

    基础练习

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        @keyframes moveAndchange {
            0%{
                left: 0px;
                top: 0px;
            }
            25%{
                left: 200px;
                top: 200px;
                background: orange;
                border-radius: 0;
            }
            50%{
                left: 400px;
                top: 200px;
                background: orangered;
                border-radius: 50%;
            }
            75%{
                left:400px;
                top: 0px;
                background: palegreen;
                border-radius: 0px;
            }
            100%{
                left: 0px;
                top: 0px;
                background: aliceblue;
                border-radius: 50%;
            }
        }
        div{
                width: 200px;
                height: 200px;
                margin: 200px;
                position: absolute;
                background: aqua;
                border-radius: 50%;
                animation: moveAndchange 10s;
                animation-timing-function: ease-out;
                animation-delay :2s;
                animation-timing-function: 2;
            }
    </style>
    <body>
        <div></div>
    </body>
    </html>
    

    总结

    1、keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
    2、在一个“@keyframes”中的样式规则可以由多个百分比构成的。
    如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。
    3、用cubic-bezier设置动画的速度曲线,它是由曲线的斜率决定速度的快慢。

    展开全文
  • Transform在部分的test case当中,每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,...
  • transition属性和animation属性

    千次阅读 2018-09-06 09:54:28
    一、transition CSS3的过渡功能就像是一种黄油,可以让...属性可以分开写,也可以放在一起写,比如下面的代码,图片的宽高本来都是15px,想要让它1秒的时间内过渡到宽高为450px,通过:hover来触发,那么代码就可以...

    一、transition

    CSS3的过渡功能就像是一种黄油,可以让CSS的一些变化变得平滑。因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多,所以才会更平滑。

    transition的属性

    这里写图片描述

    属性可以分开写,也可以放在一起写,比如下面的代码,图片的宽高本来都是15px,想要让它1秒的时间内过渡到宽高为450px,通过:hover来触发,那么代码就可以如下:

    <span style="color:#000000"><code><span style="color:#006666">img</span>{
        height:<span style="color:#006666">15</span>px;
        width:<span style="color:#006666">15</span>px;
        transition: <span style="color:#006666">1</span>s <span style="color:#006666">1</span>s height ease;<span style="color:#880000">/*合在一起*/</span>
    }
    或者:
    <span style="color:#006666">img</span>{
        height:15px;
        width: <span style="color:#006666">15</span>px;
        transition-property: height;
        transition-duration: <span style="color:#006666">1</span>s;
        transition-delay: <span style="color:#006666">1</span>s;
        transition-timing-function: ease;<span style="color:#880000">/*属性分开写*/</span>
    }
    <span style="color:#006666">img</span><span style="color:#000000">:hover</span>{
        height: <span style="color:#006666">450</span>px;
        width: <span style="color:#006666">450</span>px;
    }</code></span>
    •  
    • 渡所需要时间与过渡延迟时间的单位都是秒,所以在合起来写transition的属性的时候,第一个time会解析为transiton-duration,第二个解析为transition-delay。所以,可以给transition一个速记法
    <span style="color:#000000"><code>transiton: <span style="color:#009900">过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间;</span></code></span>

    属性详解

    transition-property

    不是所有属性都能过渡,只有属性具有一个中间点值才具备过渡效果。完整列表,见这个列表 ,具体效果,见 这个页面

    transition-duration

    指定从一个属性到另一个属性过渡所要花费的时间。默认值为0,为0时,表示变化是瞬时的,看不到过渡效果。

    transiton-timing-function

    过渡函数,有如下几种:

    liner :匀速 
    ease-in:减速 
    ease-out:加速 
    ease-in-out:先加速再减速 
    cubic-bezier:三次贝塞尔曲线,可以定制 点击这里

    触发过渡

    单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点击,悬浮等)触发,可触发的方式有: 
    :hoever :focus :checked 媒体查询触发 JavaScript触发

    局限性

    transition的优点在于简单易用,但是它有几个很大的局限。 
    (1)transition需要事件触发,所以没法在网页加载时自动发生。 
    (2)transition是一次性的,不能重复发生,除非一再触发。 
    (3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。 
    (4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。 
    CSS Animation就是为了解决这些问题而提出的。

    二、animation

    CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成: 
    1)通过类似Flash动画中的帧来声明一个动画; 
    2)在animation属性中调用关键帧声明的动画。

    Note:animation属性到目前位置得到了大多数浏览器的支持,但是,需要添加浏览器前缀哦!需要添加浏览器前缀哦!需要添加浏览器前缀哦!

    animation动画属性

    还是先列表格来说明属性,自己感觉会比较清晰:

    这里写图片描述 
    (1)animation-name:none为默认值,将没有任何动画效果,其可以用来覆盖任何动画 
    (2)animation-duration:默认值为0,意味着动画周期为0,也就是没有任何动画效果 
    (3)animation-timing-function:与transition-timing-function一样 
    (4)animation-delay:在开始执行动画时需要等待的时间 
    (5)animation-iteration-count:定义动画的播放次数,默认为1,如果为infinite,则无限次循环播放 
    (6)animation-direction:默认为nomal,每次循环都是向前播放,(0-100),另一个值为alternate,动画播放为偶数次则向前播放,如果为基数词就反方向播放 
    (7)animation-state:默认为running,播放,paused,暂停 
    (8)animation-fill-mode:定义动画开始之前和结束之后发生的操作,默认值为none,动画结束时回到动画没开始时的状态;forwards,动画结束后继续应用最后关键帧的位置,即保存在结束状态;backwards,让动画回到第一帧的状态;both:轮流应用forwards和backwards规则。

    @keyframes

    CSS3的animation制作动画效果主要包括两部分:1. 用关键帧声明一个动画,2.在animation调用关键帧声明的的动画。

    @keyframes就是关键帧。这个帧与Flash里的帧类似,一个动画中可以有很多个帧。

    一个@keyframes中的样式规则是由多个百分比构成的,可以在这个规则上创建多个百分比,从而达到一种不断变化的效果。另外,@keyframes必须要加webkit前缀。举个例子:

    <span style="color:#000000"><code><span style="color:#000000">div</span><span style="color:#000000">:hover</span> {
      -webkit-animation:<span style="color:#009900"> <span style="color:#009900">1</span>s changeColor</span>;
      animation:<span style="color:#009900"> <span style="color:#009900">1</span>s changeColor</span>;  
    }
    
    @<span style="color:#000088">-webkit-keyframes</span> changeColor {
      0% { background:<span style="color:#009900"> <span style="color:#006666">#c00</span></span>; }
      50% { background:<span style="color:#009900"> orange</span>; }
      100% { background:<span style="color:#009900"> yellowgreen</span>; }
    }
    @<span style="color:#000088">keyframes</span> changeColor {
      0% { background:<span style="color:#009900"> <span style="color:#006666">#c00</span></span>; }
      50% { background:<span style="color:#009900"> orange</span>; }
      100% { background:<span style="color:#009900"> yellowgreen</span>; }
    }</code></span>

    上面代码中的0% 100%的百分号都不能省略,0%可以由from代替,100%可以由to代替。要让changeColor动画有效果,就必须要通过CSS3animation属性来调用它。

    区别

    animation属性类似于transition,他们都是随着时间改变元素的属性值,其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果

    我做了一个小例子,使用animation来模拟PPT播放,实现了从左边进,从上面进,放大,缩小和旋转。地址:这里 
    过程中,又学习和巩固了一些CSS3的新特性,一并总结在这里:

    伪类选择器

    目标伪类选择器

    :target,目标伪类选择器,用来匹配文档的URI中某个标识符的目标集。具体来说,URI中的标识符通常会包含一个#,后面带有一个标识符名称。例如

    :target前面如果什么都不加,就是匹配页面上所有的URL里的# 。 
    “:target”伪类选择器,选取链接的目标元素,然后定义样式。目标伪类选择器是动态选择器,只有存在URL指向该匹配元素时,样式效果才会生效。如上面代码中,div:target 才会生效,如果写的是p:target则不会产生任何效果,因为页面中没有p元素。 这里通过target伪类实现了手风琴效果,详情请见github

    否定伪类选择器

    :not()类似jQuery中的 :not()选择器,主要用来定位不匹配该选择器的元素。其用途还是很强大的,举2个例子:

    :nth-of-type

    :nth-of-type与:nth-child的区别,举个例子来解释:

    <span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"post"</span>></span> 
        <span style="color:#006666"><<span style="color:#4f4f4f">p</span>></span>第一个段落<span style="color:#006666"></<span style="color:#4f4f4f">p</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">p</span>></span>第二个段落<span style="color:#006666"></<span style="color:#4f4f4f">p</span>></span>
    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span></code></span>

    接下来,我们想给第二个段落改变字体颜色,改成红色

    <span style="color:#000000"><code><span style="color:#9b703f">.post</span>><span style="color:#000000">p</span><span style="color:#000000">:nth-child(2)</span>{color:<span style="color:#009900">red</span>}
    <span style="color:#9b703f">.post</span>><span style="color:#000000">p</span><span style="color:#000000">:nth-of-type(2)</span>{color:<span style="color:#009900">red</span>}</code></span>

    这两段代码都可以让第二段变成红色,但这并不是说这两个选择器就是一样的。接着看,如果页面结构变成这样

    <span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"post"</span>></span> 
        <span style="color:#006666"><<span style="color:#4f4f4f">h1</span>></span>标题<span style="color:#006666"></<span style="color:#4f4f4f">h1</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">h2</span>></span>副标题<span style="color:#006666"></<span style="color:#4f4f4f">h2</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">p</span>></span>第一个段落<span style="color:#006666"></<span style="color:#4f4f4f">p</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">p</span>></span>第二个段落<span style="color:#006666"></<span style="color:#4f4f4f">p</span>></span>
    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span></code></span>

    再用上面的样式,你会发现

    <span style="color:#000000"><code><span style="color:#9b703f">.post</span>><span style="color:#000000">p</span><span style="color:#000000">:nth-child(2)</span>{color:<span style="color:#009900">red</span>}<span style="color:#880000">/*没有元素变红色*/</span>
    <span style="color:#9b703f">.post</span>><span style="color:#000000">p</span><span style="color:#000000">:nth-of-type(2)</span>{color:<span style="color:#009900">red</span>}<span style="color:#880000">/*还是第二个段落变红色*/</span></code></span>

    添加了h1后,:nth-child(2)还是在选择div的第二个子元素,而这时候,div的第二个子元素是h2,与p不匹配,所以p:nth-child(2)匹配不到任何元素。 
    :nth-child( )选择的是某父元素的子元素,这个子元素并没有确切的类型;:nth-of-type( )选择的某父元素的某子元素,这个子元素是指定的类型

    文本阴影

    还用到了text-shadow属性 ,前面的例子里也使用到了,

    <span style="color:#000000"><code>text-shadow: -<span style="color:#006666">1</span>px -<span style="color:#006666">1</span>px <span style="color:#006666">1</span>px rgba(<span style="color:#006666">0</span>,<span style="color:#006666">0</span>,<span style="color:#006666">0</span>,<span style="color:#006666">0.9</span>);<span style="color:#880000">/*X轴位移,Y轴位移,阴影模糊半径,颜色*/</span></code></span>

    我觉着,CSS还是很强大,学好JavaScript固然重要,但是也不能把CSS丢在一边,我个人还是很喜欢学习CSS的,很酷炫啊。

    展开全文
  • 在CSS3中我们可以使用animation属性来创建复杂的动画效果,包括移动,旋转,缩放,倾斜(后几个请参考css3中的transform,scale等属性)等。而这一切,只需要我们创建关键帧(@keyframes),然后将自己想要实现的...
  • css3 animation属性和使用方法

    千次阅读 2019-10-14 14:23:51
    css3 animation属性 将动画与元素绑定。 animation需要配合@keyframes使用。可以添加的参数有以下几种: animation, animation-name, animation-duration, animation-timing-function, animation-delay, ...

    css3 animation属性

    将动画与元素绑定。
    animation需要配合@keyframes使用。可以添加的参数有以下几种:
    animation,
    animation-name,
    animation-duration,
    animation-timing-function,
    animation-delay,
    animation-iteration-count,
    animation-direction,
    animation-play-state,
    animation-fill-mode;

    与@keyframes配合使用

    在这里插入图片描述

    参数的使用

    animation-name
    设置要添加上哪组动画的名称(@keyframes自定义名称);
    animation-duration
    设置完成该动画需要多长时间;
    animation-timing-function

       animation-timing-function: linear;
    

    设置该动画的运动效果;
           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)
      cubic-bezier:特定的贝塞尔曲线类型。
      step-start::等同于 steps(1, start)
      step-end:等同于steps(1, end)
      steps(第一个参数必须为正数,指定动画会以几步的方式来分割总时长
    animation-delay

    animation-delay: 3s;
    

    设置延迟时间,延迟多久才执行这个动画;
    animation-iteration-count

    animation-iteration-count: infinite;
    

    设置该动画要循环多少次播放(如果设置多个属性值,用逗号隔开)
    默认只会执行依次。
    infinite:无限循环;
    animation-direction

     animation-direction: reverse;
    

    设置关键帧容器的播放顺序,也就是,我们一般的关键帧容器,是从0% 开始 到 100%,正常方向播放,使用该属性,可以改变他的方向,例如从 100% 往 0% 播放。
    参数:
      normal:默认值,正常方向
      reverse:反方向运动。
      alternate:先从正常的方向运动,然后在从反方向运动,并持续交替运动,(也就是,我们设置的次数,必须超过2)
      alternate-reverse:跟上面的相反, 先从 反反向运动,然后再从正常方向运动,并持续交替运动
    animation-play-state

    设置可以暂停,和运动的属性(兼容性还不是很好,在一些场景中会有错误行为 。部分浏览器不支持伪元素动画,或者支持得不够好,尽可能不要利用伪元素来做动画)
    参数:
      running:默认值,运动
      paused:暂停
    animation-fill-mode

     animation-fill-mode: forwards;
    

    设置动画的状态;
    参数:
      none:默认值。没啥效果
      forwards:关键帧容器的 100% 的状态, 就是该动画结束时的样子。
      backwards:关键帧容器的 0% 的状态, 就是该动画开始时的样子。
      both:也就是上面两个的结合体。 开始和结束都有。
    animation各个属性简写
    animation:name duration timing-function() delay iteration-count direction play-state fill-mode;
    从第三个参数开始,后面的参数的位置,都是可以随意调位置的,因为他们并没有相同的属性值,所以可以 随便填,不分位置。

    展开全文
  • 另外一种方法就是在xml中对控件的属性做设置,好处是代码的重用性比较高,缺点是不方便调试。一、在java代码中使用Animation在java代码中使用Animation主要分为下面4个步骤。创建一个AnimationSet类,AnimationSet类...
  • 使用CSS3来实现-在线案例1-在线案例-2 若要用CSS3的属性实现的话,非animation莫属,因为transition是需要手动的触发,而且不能无限次执行下去,而animation恰好能解决这个问题。 假如数据是在写死的情况下时,我们...

    在页面中循环展示信息的功能之前一般是用js来实现的,那么用CSS3该如何实现实现呢

    有时候在页面的某个模块中,需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)?

    1. 克隆A一份完全一样的数据B放在原数据A的后面;

    2. 使用setInterval向上滚动A的父级容器;

    3. 当向上滚动的距离L正好的A的高度时(L==A.height()),L=0,重新开始滚动,无限循环。

    克隆一份数据放在后面,是为了当A向上移动时,后面有数据能填补漏出来的空白。当B移动到可视区域的顶部时,此时A刚好移出可视区域,那么此时将容器重新归0,用户是没有感知的,以为还是B中的第一条数据。然后继续向上滚动。

    1. 使用CSS3来实现-在线案例1-在线案例-2

    若要用CSS3的属性实现的话,非animation莫属,因为transition是需要手动的触发,而且不能无限次执行下去,而animation恰好能解决这个问题。

    假如数据是在写死的情况下时,我们完全可以手动复制一份数据放在后面,然后把原数据的高度写到css中,实现的思路与上面的一样:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>CSS3实现无限循环的无缝滚动</title>
    		<style type="text/css">
    			@keyframes rowup {
    				0% {
    					-webkit-transform: translate3d(0, 0, 0);
    					transform: translate3d(0, 0, 0);
    				}
    
    				100% {
    					-webkit-transform: translate3d(0, -307px, 0);
    					transform: translate3d(0, -307px, 0);
    				}
    			}
    
    			.list {
    				width: 300px;
    				border: 1px solid #999;
    				margin: 20px auto;
    				position: relative;
    				height: 200px;
    				overflow: hidden;
    			}
    
    			.list .rowup {
    				-webkit-animation: 10s rowup linear infinite normal;
    				animation: 10s rowup linear infinite normal;
    				position: relative;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="list">
    			<div class="cc rowup">
    				<div class="item">1- 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    				<div class="item">2- 啵啵啵啵啵啵啵啵啵啵啵啵宝宝</div>
    				<div class="item">3- 踩踩踩踩踩踩踩踩踩踩踩踩</div>
    				<div class="item">4- 顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</div>
    				<div class="item">5- 呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃</div>
    				<div class="item">6- 反反复复烦烦烦烦烦烦烦烦烦烦烦烦</div>
    				<div class="item">7- 呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱</div>
    				<div class="item">8- 哈哈哈哈哈哈哈哈哈哈哈</div>
    				<div class="item">9- 涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛</div>
    				<div class="item">1- 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    				<div class="item">2- 啵啵啵啵啵啵啵啵啵啵啵啵宝宝</div>
    				<div class="item">3- 踩踩踩踩踩踩踩踩踩踩踩踩</div>
    				<div class="item">4- 顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</div>
    				<div class="item">5- 呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃</div>
    				<div class="item">6- 反反复复烦烦烦烦烦烦烦烦烦烦烦烦</div>
    				<div class="item">7- 呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱</div>
    				<div class="item">8- 哈哈哈哈哈哈哈哈哈哈哈</div>
    				<div class="item">9- 涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    2. 数据不确定时

    在上面的小节中,数据是死的,高度也是写死到了CSS3中。可是如果从接口获取到的数据个数不定呢,每条数据的长度也不确定,怎么办呢?

    这里就需要根据数据来重新计算高度,并写到CSS里,可是keyframes修改起来还比较麻烦,那么我们就用覆盖的方式来重新keyframes中的数据:

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS3无限滚动</title>
    		<style type="text/css">
    			@-webkit-keyframes rowup {
    				0% {
    					-webkit-transform: translate3d(0, 0, 0);
    					transform: translate3d(0, 0, 0);
    				}
    
    				100% {
    					-webkit-transform: translate3d(0, -312px, 0);
    					transform: translate3d(0, -312px, 0);
    				}
    			}
    
    			@keyframes rowup {
    				0% {
    					-webkit-transform: translate3d(0, 0, 0);
    					transform: translate3d(0, 0, 0);
    				}
    
    				100% {
    					-webkit-transform: translate3d(0, -312px, 0);
    					transform: translate3d(0, -312px, 0);
    				}
    			}
    
    			.list {
    				width: 400px;
    				border: 1px solid #999;
    				margin-top: 20px;
    				position: relative;
    				height: 200px;
    				overflow: hidden;
    			}
    
    			.list .rowup {
    				-webkit-animation: 10s rowup linear infinite normal;
    				animation: 10s rowup linear infinite normal;
    				position: relative;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>用CSS3实现无限循环的无缝滚动</h1>
    		<p>返回文章: <a href="https://jackiehao.blog.csdn.net/">用CSS3实现无限循环的无缝滚动</a></p>
    
    		<p>使用js随机生成数据 | <a href="javascript:window.location.reload()">刷新页面观察不同数据</a></p>
    		<div class="list">
    			<div class="cc">
    
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		// 设置keyframes属性
    		function addKeyFrames(y) {
    			var style = document.createElement('style');
    			style.type = 'text/css';
    			var keyFrames = '\
        @-webkit-keyframes rowup {\
            0% {\
                -webkit-transform: translate3d(0, 0, 0);\
                transform: translate3d(0, 0, 0);\
            }\
            100% {\
                -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
                transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            }\
        }\
        @keyframes rowup {\
            0% {\
                -webkit-transform: translate3d(0, 0, 0);\
                transform: translate3d(0, 0, 0);\
            }\
            100% {\
                -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
                transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            }\
        }';
    			style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    			document.getElementsByTagName('head')[0].appendChild(style);
    		}
    
    
    		function init() {
    			var data = '塞下秋来风景异,衡阳雁去无留意。四面边声连角起,千嶂里,长烟落日孤城闭。浊酒一杯家万里,燕然未勒归无计。羌管悠悠霜满地,人不寐,将军白发征夫泪。', //样例数据
    				data_len = data.length,
    				len = parseInt(Math.random() * 6) + 6, // 数据的长度
    				html = '<div class="ss">';
    
    			for (var i = 0; i < len; i++) {
    				var start = parseInt(Math.random() * (data_len - 20)),
    					s = parseInt(Math.random() * data_len);
    				html += '<div class="item"v>' + i + '- ' + data.substr(start, s) + '</div>';
    			}
    			html += '</div>';
    			document.querySelector('.list .cc').innerHTML = html + html; // 复制一份数据
    			var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度
    			addKeyFrames('-' + height + 'px'); // 设置keyframes
    			document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup
    		}
    		init();
    	</script>
    </html>
    

    所有的元素都已经复制了1份,直接滚动50%即可!如果不需要高度和滚动速度匹配的话,完全不用获取内部元素的高度;当然,如果要滚动速度一致的话,还是要通过内容的高度计算出滚动的时间的。

    若要实现成react或者Vue的组件,要注意的是在DOM渲染完毕后,再使用document.querySelector获取DOM元素,进而获取内容的高度。这里用react简要地实现下这个滚动组件:

    import React from 'react';
    
    interface ScrollProps {
        height: number; // 容器的高度
        speed: number; // 滚动的速度,越大则滚动的越快,反之越慢
    }
    
    export default class Scroll extends React.Component<ScrollProps> {
        state = {
            rollClass: ''
        };
        setScrollStyle = (offsetHeight: number, speed: number) => {
            const uid = Math.random().toString(36).substr(2);
            const style = document.createElement('style');
            style.type = 'text/css';
    
            style.innerHTML = `@-webkit-keyframes rowup${uid} {
                0% {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                }
                100% {
                    -webkit-transform: translate3d(0, -50%, 0);
                    transform: translate3d(0, -50%, 0);
                }
            }
            @keyframes rowup${uid} {
                0% {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                }
                100% {
                    -webkit-transform: translate3d(0, -50%, 0);
                    transform: translate3d(0, -50%, 0);
                }
            }
            .rowup-${uid}{
                -webkit-animation: ${Math.floor(offsetHeight*1000 / speed)}ms rowup${uid} linear infinite normal;
                animation: ${Math.floor(offsetHeight*1000 / speed)}ms rowup${uid} linear infinite normal;
            }`
            document.getElementsByTagName('head')[0].appendChild(style);
            return `rowup-${uid}`;
        }
    
        componentDidMount() {
            const scrollContent: HTMLElement | null = document.querySelector('.scroll .scroll-content');
            if (scrollContent) {
                const offsetHeight = scrollContent.offsetHeight;
    
                const scrollClass = this.setScrollStyle(offsetHeight / 2, this.props.speed || 35);
                this.setState({
                    rollClass: scrollClass
                });
            }
        }
        render() {
            const rollClass = this.state.rollClass ? ' ' + this.state.rollClass : '';
            return (
                <div className="scroll" style={{height: this.props.height}}>
                    <div className={"scroll-content" + rollClass}>
                        {this.props.children}
                        {this.props.children}
                    </div>
                </div>
            );
        }
    }
    <Scroll height={180} speed={60}>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
    </Scroll>
    
    <Scroll height={100} speed={30}>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </Scroll>

    横向滚动

    上面讲解的都是向上滚动,那么向左,向右,向下也比较容易理解了,把transform中的值更改为对应的数值即可

     

    展开全文
  • animation属性详解

    2019-08-22 17:46:57
    css3的animation可以实现很多炫酷的动画,让自己的网页看起来更加生动灵活,下面,来看一下都有些什么玩意属性。 动画属性 首先,我们看一下具体写法 animation: name duration timing-function delay iteration-...
  • 主要介绍了Android中Property Animation属性动画编写的实例教程,Property Animation对于动画帧的操控十分强大,需要的朋友可以参考下
  • 二、Animation属性 1、animation-delay animation-delay 属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度。可以简单地理解为经过多久时间开始执行这段动画。 animation-delay: 3s; 2、...
  • @keyframes规则 定义 使用@keyframes规则,可以创建动画,通过逐步的改变,从一个CSS样式到另一个CSS样式。设置指定时间点的变化时使用%,或使用关键字‘from’和‘to’...定义animation属性的名称。 keyframes-selec
  • css3:animation样式有6个属性animation-name :规定需要绑定到选择器的 keyframe 名称。。 animation-duration :规定完成动画所花费的时间,以秒或毫秒计。 animation-timing-function :规定动画的速度曲线。 ...
  • css3动画animation属性大全

    万次阅读 多人点赞 2018-02-28 11:48:47
    animation属性语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;例:animation: myanimation 2s linear 1s infinite forwards;animation 属性是一个简写属性...
  • jquery css3 animation属性多个页面切换动画 jquery css3 animation属性多个页面切换动画
  • CSS3 Animation属性发光按钮代码,不兼容Firefox浏览器。
  • animation 属性 定义和用法 animation 属性是一个简写属性,用于设置六个动画属性:  animation-name  animation-duration  animation-timing-function  animation-delay  animation-iteration-count  ...
  • 纯css3 animation属性制作旋转文字动画切换效果

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 98,495
精华内容 39,398
关键字:

animation属性