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

    千次阅读 2018-08-10 16:11:39
    css动画 首先要明白动画是一帧一帧的,由多个帧拼起来的动画 @keyframes 此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分 其指示了一个过程到另一个过程的...

    css动画
    首先要明白动画是一帧一帧的,由多个帧拼起来的动画

    @keyframes

    此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分
    其指示了一个过程到另一个过程的过程
    关键帧还具有名字,在应用的时候通过名字将其绑定。

    如果关键帧重复定义,则根据最后一次定义为准

    关键帧中的important会被略过

    举个栗子

    定义一个关键帧

    @keyframes myFrames {
        form {
            background:#a7e5c6;
            width:100px;
        }
    
        to {
            width:90%;
            background:#c6c2a3;
        }
    }

    样式如下
    此处输入图片的描述

    这样就完成一次动画操作

    分开定义

    也可以进行分开定义
    按照百分号进行定义,结果如下
    关键帧如下

    @keyframes myFrames {
        0% {
            width:200px;
            background:#827e64;
        }
    
        20% {
            width:400px;
            background:#86bece;
        }
    
        50% {
            height:600px;
            background:#af92aa;
        }
    
        90% {
            width:300px;
            height:400px;
            background:#698771;
        }
    }

    效果如下
    此处输入图片的描述

    animation

    animation 同样是一个简写属性,相比较js写动画来说,css动画已经灰常简单了。

    大概看了一点纯js动画,js动画核心在于对css样式的更改,外加一个重复时间对css不断的累加得到动画效果

    下面依次说明

    animation-name

    和关键帧进行绑定
    必须和关键帧的名字相同(废话)

    animation-duration

    指定一个动画的周期

    负值的动画无效

    举一个栗子

    div {
        width:300px;
        height:400px;
        background:#698771;
        margin:auto;
        animation-name: myFrames;
        animation-duration:.9s;
    }
    
    /*关键帧*/
    @keyframes myFrames {
        0% {
            width:200px;
            background:#827e64;
        }
    
        20% {
            width:400px;
            background:#86bece;
        }
    
        50% {
            height:600px;
            background:#af92aa;
        }
    
        90% {
            width:300px;
            height:400px;
            background:#698771;
        }
    }

    动画效果如下
    此处输入图片的描述

    animation-timing-function

    定义一个动画的过程,类似于过渡的函数
    同样的,有贝塞尔曲线等等
    不在阐述

    DevTools

    谷歌浏览器的调试工具具有该方法,可以直接使用调试工具绘制贝塞尔曲线
    此处输入图片的描述

    animation-delay

    定义动画的延迟
    此处输入图片的描述
    css如下

    * {
        margin:0;
        padding:0;
    }
    body {
        position:relative;
    }
    div {
        width:400px;
        height:400px;
        position: absolute;
        left:0;
        top:0;
        bottom:0;
        margin:auto;
        background:#698771;
        border-radius:1000px;
        animation-name: myFrames;
        animation-duration:5s;
        animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
        animation-delay:.9s;
    }
    div div {
        width:40px;
        height:40px;
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        background:#e8e3da;
        animation-name:myCenter;
    }
    
    /*关键帧*/
    @keyframes myFrames {
        from {
            left:0;
        }
    
        to {
            left:70%;
        }
    }
    
    @keyframes myCenter {
        from {
            left:0;
        }
    
        to {
            left:0;
        }
    }

    html如下

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./index.css" type="text/css">
        <title>css动画</title>
    </head>
    <body>
        <div>
            <div></div>
        </div>
    </body>
    </html>
    <script src="./index.js"></script>

    动画延迟了0.9秒

    animation-iteration-count

    定义动画的迭代次数infinite 为永远重复
    数值为number

    举栗子

    animation-iteration-count:3;

    动画重复播放3次。

    animation-iteration-count:infinite;

    动画永远重复播放

    animation-direction

    定义是否向前,向后,是否交替来回

    如果想要重复的多次播放,必须有animation-iteration-count的值为infinity否则不会出现重复播放

    normal

    为一个每次重复重新的位置开始播放(每次都将重置为新状态,开始执行)
    此处输入图片的描述

    reverse

    倒序播放
    此处输入图片的描述

    alternate

    奇数正向播放
    偶数倒序播放
    即来回
    此处输入图片的描述

    alternate-reverse

    奇数倒序播放
    偶数正向播放
    即倒来回
    此处输入图片的描述

    ps 动画具有继承的属性

    animation-fill-mode

    forwards

    将会保留最后一个关键帧,让其停留。
    此处输入图片的描述
    css

        /*animation-iteration-count:infinite;*/
        animation-direction:alternate;
        animation-fill-mode:forwards;

    backwards

    将会应用第一个动画值
    此处输入图片的描述
    和none的区别在于none使用默认的css样式,backwards将会使用动画的第一帧

        /*animation-iteration-count:infinite;*/
        animation-direction:alternate;
        animation-fill-mode:backwards;

    ps 加上注释的原因是因为如果不加将会重复播放。

    both

    将会遵守倒序还是正序的停留

    正序

        /*animation-iteration-count:infinite;*/
        animation-direction:normal;
        animation-fill-mode:both;

    此处输入图片的描述

    倒序

    此处输入图片的描述

        /*animation-iteration-count:infinite;*/
        animation-direction:reverse;
        animation-fill-mode:both;

    总写

    按照上方顺序即可
    css 如下

    * {
        margin:0;
        padding:0;
    }
    body {
        position:relative;
    }
    div {
        width:400px;
        height:400px;
        position: absolute;
        left:0;
        top:0;
        bottom:0;
        margin:auto;
        background:#698771;
        border-radius:1000px;
        animation:myFrames 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s infinite alternate both;
    }
    div div {
        width:40px;
        height:40px;
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        background:#e8e3da;
        animation-name:myCenter;
    }
    
    /*关键帧*/
    @keyframes myFrames {
        from {
            left:0;
        }
    
        to {
            left:70%;
        }
    }
    
    @keyframes myCenter {
        from {
            left:0;
        }
    
        to {
            left:0;
        }
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./index.css" type="text/css">
        <title>css动画</title>
    </head>
    <body>
        <div>
            <div></div>
        </div>
    </body>
    </html>
    <script src="./index.js"></script>

    演示效果 https://melovemingming.gitee.io/code/practice/web/08/10/

    展开全文
  • css动画

    千次阅读 2017-09-12 18:31:29
    CSS 动画 定义和用法 一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。 浏览器支持 表格中的...

    CSS 动画

    定义和用法

    一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。

    动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。


    浏览器支持

    表格中的数字表示支持该方法的第一个浏览器的版本号。

    紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

             
    4.0 -webkit- 10.0 16.0
    5.0 -moz-
    4.0 -webkit- 15.0 -webkit-
    12.1
    12.0 -o-

    实例

    背景颜色逐渐地从红色变化到蓝色:

    @keyframes mymove
    {
    from {background-color:red;}
    to {left:blue;}
    }

    /*Safari 和 Chrome:*/
    @-webkit-keyframes mymove
    {
    from {background-color:red;}
    to {background-color:blue;}
    }

    尝试一下 »

    动画属性

    CSS 中的动画属性:

    属性 实例
    background 尝试一下 》
    background-color 尝试一下 》
    background-position 尝试一下 》
    background-size 尝试一下 》
    border 尝试一下 》
    border-bottom 尝试一下 》
    border-bottom-color 尝试一下 》
    border-bottom-left-radius 尝试一下 》
    border-bottom-right-radius 尝试一下 》
    border-bottom-width 尝试一下 》
    border-color 尝试一下 》
    border-left 尝试一下 》
    border-left-color 尝试一下 》
    border-left-width 尝试一下 》
    border-right 尝试一下 》
    border-right-color 尝试一下 》
    border-right-width 尝试一下 》
    border-spacing 尝试一下 》
    border-top 尝试一下 》
    border-top-color 尝试一下 》
    border-top-left-radius 尝试一下 》
    border-top-right-radius 尝试一下 》
    border-top-width 尝试一下 》
    bottom 尝试一下 》
    box-shadow 尝试一下 》
    clip 尝试一下 》
    color 尝试一下 》
    column-count 尝试一下 》
    column-gap 尝试一下 》
    column-rule 尝试一下 》
    column-rule-color 尝试一下 》
    column-rule-width 尝试一下 》
    column-width 尝试一下 》
    columns 尝试一下 》
    filter 尝试一下 》
    flex  
    flex-basis 尝试一下 》
    flex-grow 尝试一下 》
    flex-shrink 尝试一下 》
    font 尝试一下 》
    font-size 尝试一下 》
    font-size-adjust  
    font-stretch  
    font-weight 尝试一下 》
    height 尝试一下 》
    left 尝试一下 》
    letter-spacing 尝试一下 》
    line-height 尝试一下 》
    margin 尝试一下 》
    margin-bottom 尝试一下 》
    margin-left 尝试一下 》
    margin-right 尝试一下 》
    margin-top 尝试一下 》
    max-height 尝试一下 》
    max-width 尝试一下 》
    min-height 尝试一下 》
    min-width 尝试一下 》
    opacity 尝试一下 》
    order 尝试一下 》
    outline 尝试一下 》
    outline-color 尝试一下 》
    outline-offset 尝试一下 》
    outline-width 尝试一下 》
    padding 尝试一下 》
    padding-bottom 尝试一下 》
    padding-left 尝试一下 》
    padding-right 尝试一下 》
    padding-top 尝试一下 》
    perspective 尝试一下 》
    perspective-origin 尝试一下 》
    right 尝试一下 》
    text-decoration-color 尝试一下 》
    text-indent 尝试一下 》
    text-shadow 尝试一下 》
    top 尝试一下 》
    transform 尝试一下 》
    transform-origin 尝试一下 》
    vertical-align 尝试一下 》
    visibility  
    width 尝试一下 》
    word-spacing 尝试一下 》
    z-index 尝试一下 》
    展开全文
  • CSS 动画分类

    2019-07-16 10:19:53
    CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes...首先,CSS动画分类的基本概念: 1...

    CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与JS 动画主要是Animate.css 的引入、Animate.css 使用举例和JS 动画。

    首先,CSS动画分类的基本概念:

    1 过渡动画(transition)

    从初始状态过渡到结束状态所产生的动画,它只能定义初始和借宿两个状态,不能定义中间状态,它是一种很简单的最基础的css动画,这个过渡动画只能被动触发,不能主动触发,而且也不能重复发生。被动触发一次,它发生一次,不能重复。

    2 关键帧动画(Animation)

    使用关键帧@keyframes,在关键帧里面的写法如下:

    在每一个阶段我们可以定义不同的元素状态,也就是css,这样就大大增强了css的动画能力。

    总结起来就是:可以定义多个状态,可以实现更复杂的效果,相对于transition它可以主动的触发,也可以重复发生。

        @keyframes 动画名称 {
            时间点 {
        		元素状态
        	}
            时间点 {
        		元素状态
        	}
            时间点 {
        		元素状态
        	}
            时间点 {
        		元素状态
        	}
            …
        }
    

    其次 浏览器支持

    完全支持该属性的第一个浏览器版本

    在这里插入图片描述

    基本语法

        .main {
            animation: animationname(动画名字) duration(持续时间) timing-function(时间运动曲线) delay(延迟) iteration-count(总共重复的次数) direction(方向,正向播放还是反向播放) fill-mode(定义开始和结束的状态) play-state(是否停止或运行这个动画);
        }
        
        //animationname是和keyframes绑定的,在animationname下面定义动画的状态,一种是from...to从开始到结束,这个是和transition一样的,一种是百分比,从0%到100%,可以定义任意的中间状态。
        @keyframes animationname {
            from { css-code }
            to { css-code }
        
            0% - 100% { css-code }
        }
    

    1 animationname - 关键帧名称

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
        
        @keyframes round {
            from { css-code }
            to { css-code }
        
            0% - 100% { css-code }
        }
    

    2 duration - 动画持续时间(单位:s/ms)

        .main {
             width: 100px;
             height: 100px;
             background: red;
             position: relative;
             animation-name: round;
             animation-duration: 500ms;
             animation-iteration-count: infinite;
         }
         @keyframes round {
             0%  {
                   top: 0%;
                   left: 0%;
                   background: red;
             }
             25% {
                   top: 0%;
                   left: calc(100% - 100px);
                   background: blue;
             }
             50% {
                   top: calc(100% - 100px);
                   left: calc(100% - 100px);
                   background: yellow;
             }
             75% {
                   top: calc(100% - 100px);
                   left: 0%;
                   background: green;
             }
             100% {
                   top: 0%;
                   left: 0%;
                   background: red;
             }
         }
    

    3 timing-function - 时间函数曲线

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);   //贝塞尔曲线
        }
    

    timing-function 在animation里面的时间区间是两套css样式之间

    4 delay - 动画开始延迟时间(单位:s/ms)

    仅定义第一次开始延迟时间

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        	animation-delay: 3s;
        }
    

    5 iteration-count - 动画播放次数

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            animation-delay: 3s;
        }
    

    在transition里面是不能定义播放次数的,但是animation可以,它可以定义两种:一种是具体的播放次数(n),一种是无限循环(infinite)。

    6 direction - 动画播放方向

    动画实际上是相对于时间来讲的,它的播放方向就是正向还是反向播放。它有四个值,分别是:

    normal(正常播放)、reverse(反向播放)、alternate(奇数次正向,偶数次反向)、alternate-reverse(偶数次正向,奇数次反向)。

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            animation-delay: 3s;
            animation-direction: alternate;
        }
    

    7 fill-mode - 动画不播放时应用到元素的样式

    分为两个状态,一个是还没有开始放,另一个是放完了,也就是说它的循环次数不是无限次的,那么对应的有两个值比较关键:forwards 动画结束后动画将应用该属性值,也就是说动画播放完了,我们继续保留这个属性;backwards 动画开始前应用第一帧的样式,比如说本来有一个样式,然后有一个动画,动画没开始,这时我们就需要把动画的第一帧应用到当前的这个元素上。除此之外呢,还有一个none 两个都不用也就是动画结束后恢复原有样式以及both 两个都用。

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            animation-delay: 3s;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }
    

    8 play-state - 控制动画运行或暂停

    有两个值:paused 暂停和 running 运行。play-state一般应用于JS,应用js来控制css是否运行。

    更多学习参考:https://www.9xkd.com/course/4132287707.html

    展开全文
  • 在线有大量CSS动画网络应用程序 。 但是,与Animista所提供的详细程度和易用性相比, 几乎没有 。 这个免费的Web应用程序使您只需单击一个按钮即可生成自定义CSS动画 。 您可以在预先设计的动作之间进行选择,例如...

    在线有大量CSS动画网络应用程序 但是,与Animista获得的细节水平和易用性相比, 几乎没有

    这个免费的Web应用程序使您只需单击一个按钮即可生成自定义CSS动画 您可以在预先设计的动作之间进行选择,例如幻灯片,变换,摆动,甚至是阴影动画。

    创建动画后,就可以像使用其他CSS生成器一样导出代码 除此之外,此代码更易于使用,甚至带有内置的minifier工具

    Animista摇摆动画

    界面一开始会让人感到困惑,但这仅仅是因为您有多少选择!

    您可以按照以下三个主要步骤来构建自定义动画,并使用从上到下的界面:

    1. 从顶部的圆圈中选择一种运动样式 (摆动,滑动,翻转缩放)
    2. 在下方使用不同的运动类型自定义
    3. 在浮动的左侧选项栏中编辑动画选项

    通过此过程,您可以更改动画的总持续时间,缓动样式,延迟等几乎所有方面。 所有这些都通过纯CSS3进行 ,这使它更加令人印象深刻。

    还要注意,在最顶部的导航栏上,您甚至可以在不同类型的动画目标样式之间进行选择。

    默认值为“基本” ,几乎可以处理任何内容(悬停,单击或立即播放动画)。 其他目标包括页面文本,背景动画,甚至是自定义入口动画,以使隐藏的页面元素可见。

    我特别喜欢顶部的“注意力”链接,该链接对按钮样式具有很酷的抖动和抖动效果。 这些在CTA按钮上非常有用,可以吸引注意力并鼓励用户互动。

    Animista动画网络应用

    完成调整后,只需单击预览窗格右上角的小括号图标

    这将带您完整CSS动画类以及关键帧进入一个新页面。 可选功能使您可以减少代码包括支持旧版Web浏览器的自动前缀

    我使用了大量的自定义CSS动画工具,毫无疑问,Animista是其中功能最丰富的工具。 它是完全免费的,一开始有点复杂,但是一旦您了解了该接口,它便是迄今为止可以使用的最佳生成器。

    要尝试一下,只需访问主页并单击“ Try me”。 您还可以与网络应用的创建者@ ana108分享您的想法和赞美。


    翻译自: https://www.hongkiat.com/blog/animista-generate-css-animations/

    展开全文
  • CSS动画的毕业设计

    千次阅读 多人点赞 2020-09-02 20:09:25
    CSS动画的毕业设计 用CSS动画写一个七龙珠,据说善良的程序员可以看到龙神,并许愿成功 动画的基本属性和参数 老样子,先给源码 <!DOCTYPE html> <html lang="en" > <head> <...
  • 关于css动画的优化

    千次阅读 2017-05-04 02:10:04
    css 动画
  • uni-app扫雷先锋 nvue css过渡动画 nvue css动画需求分析需求nvue使用css过渡动画的注意事项 需求分析 uniapp写项目如果只要app端,为了提升整体的性能和体验,可能会考虑整体使用nvue。在多端兼容的情况下也有可能...
  • CSS动画效果

    万次阅读 多人点赞 2019-05-28 20:21:11
    07三列等宽布局 1 2 3 07、css3伸缩布局 css3伸缩布局 1 2 3 08、css3伸缩布局固定 css3伸缩布局固定宽度 1 2 3 09、css3伸缩布局垂直分布 ...
  • 渲染线程分为main thread和compositor thread,如果css动画只改变transform和opacity,这时整个CSS动画得以在compositor trhead完成(而js动画则会在main thread执行,然后出发compositor thread进行下一步操作...
  • css动画及js动画的区别

    千次阅读 2018-06-12 13:42:09
    css动画 相对来说 代码少 代码简单 js 动画 需要引入各种库之类的对于多种类似的动画过程css动画需要些好多 不支持复用 js动画可以实现一个函数 重复调用函数切换不同的参数就可以css动画 对于细节的帧数把控不是...
  • 常见 CSS 动画

    千次阅读 2018-08-15 16:14:04
    自从 CSS3 有了动画功能,从此 Web 页面就迈进“忽如一夜春风来,千页万页动画开”的盛况。 所以 CSS 动画除了是炫技之选更是一项基本技能,当然也...Animate.css 是最早的也是目前最流行和最易于使用的CSS动画库之...
  • css动画与js动画的区别

    千次阅读 2018-09-21 10:42:55
    使用动画 (js实现动画,css3实现动画) + 一个是帧动画 一个是补间动画 + 什么是帧动画:使用定时器 每隔一段时间 更改当前元素的状态 ...CSS动画 优点: 1、浏览器可以对动画进行优化。 (1) 浏览器使用与 req...
  • style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #wrap{ width: 300px; height: 300px; position: absolute...
  • HTML5+CSS动画最佳实战

    2016-02-22 15:27:31
    HTML5+CSS动画最佳实战,研究一下css3动画的魅力,提高篇...网络下载收集的
  • 简单的CSS动画

    2019-01-18 11:17:07
    简单的CSS动画 (作者:郭海明,撰写时间:2019年1月17日) 如果我们想让一个长方块沿水平方向移动,并且方块是翻滚状态下移动, 这个时候我们就可以通过一个简单的CSS3方法来实现这个动作, 先在HTML里面设置一个...
  • 9种常用CSS动画

    千次阅读 2020-10-28 19:21:13
    复制可用 <!... <... <...9种css动画</title> <link rel="stylesheet" type="text/css" href="css/demo2.css"/> <link rel="icon" sizes="any" mask="" href="./img/baidu.svg
  • Animation.css动画效果属性

    千次阅读 2020-01-06 17:17:24
    Animation.css动画效果属性安装使用写法规则animation.css支持的动画种类支持延时效果(delay效果延时执行)和加速(speed效果执行所花费的时间)使用示例 安装 npm install animate.css --save 或者 yarn add ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,331
精华内容 17,732
关键字:

css动画