30分钟玩转css3动画, transition,animation

其实css3动画是就是2种实现,一种是transition,另一种就是animation。transition实现的话就是只能定制开始帧,和结束2帧;而animation实现的话可以写很多关键帧。
没有前戏,直进主题。

transition

包含4个值,例如:-webkit-transition:all .5s ease 1s;
 分别顺序是(m代表必须): 变换的属性(m)、变换过渡的时间(m)、变换的速率、变换延时执行的时间。
来个小demo:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        .transition {
            width:30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
            display: inline-block;
            background:lightblue;
            -webkit-transition:all .5s ease;
            transition:all .5s ease;
            color:#fff;
        }
        .transition:hover {
            -webkit-transform:rotate(360deg);
            transform:rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="transition">×</div>
</body>
</html>

应用例子:
http://skyweaver213.github.io/slide/widget/slide2/slide.html
http://skyweaver213.github.io/slide/widget/slide3/slide.html

animation:

就是一个动画对应一个keyframes,然后一个keyframes 里可以有N多个关键帧。
例如一个keyframes里我们可以这样写:

@-webkit-keyframes go {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(500px);
    }
}

然后我们需要在应用这个keyframes的元素上写一个animation,
例如:-webkit-animation:go 2.5s ease infinite 0;  
参数顺序分别是(m代表必须):动画名字(m)、执行的时间(m)、过渡的速率、执行多小次、延迟执行的时间

小demo:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .animation {
            width: 100px;
            height: 100px;
            display: block;
            background: pink;
            -webkit-animation: go 2.5s infinite;
            /*-webkit-animation: go 2.5s cubic-bezier(.25, -0.25, .75, 1.25) infinite;*/
        }

        @-webkit-keyframes go {
            0%, 100% {
                -webkit-transform: translateX(0);
            }
            50% {
                -webkit-transform: translateX(500px);
            }
        }
    </style>
</head>
<body>

<div class="animation"></div>

</body>
</html>

应用deom:loading状态、三条线变箭头。
http://skyweaver213.github.io/slide/widget/slide1/slide.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .loading {
            position: relative;
            width: 40px;
            height: 40px;
            margin: 40px auto;
            -webkit-transform:rotate(165deg);
        }
        .loading:before, .loading:after {
            content: ‘‘;
            position: absolute;
            width: 8px;
            height: 8px;
            top: 50%;
            left: 50%;
            display: inline-block;
            border-radius: 4px;
            -webkit-transform: translate(-50%, -50%);
        }
        .loading:before {
            -webkit-animation:before 2s infinite;
        }
        .loading:after {
            -webkit-animation:after 2s infinite;
        }

        @-webkit-keyframes before {
            0% {
                width: 8px;
                box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);
            }

            35% {
                width: 40px;
                box-shadow: 0 -8px rgba(225, 20, 98, 0.75), 0 8px rgba(111, 202, 220, 0.75);
            }

            70% {
                width: 8px;
                box-shadow: -16px -8px rgba(225, 20, 98, 0.75), 16px 8px rgba(111, 202, 220, 0.75);
            }

            100% {
                box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);
            }
        }

        @-webkit-keyframes after {
            0% {
                height: 8px;
                box-shadow: 8px 16px rgba(61, 184, 143, 0.75), -8px -16px rgba(233, 169, 32, 0.75);
            }

            35% {
                height: 40px;
                box-shadow:8px 0 rgba(61, 184, 143, 0.75),-8px 0 rgba(233, 169, 32, 0.75);
            }

            70% {
                height: 8px;
                box-shadow:  8px -16px rgba(61, 184, 143, 0.75), -8px 16px rgba(233, 169, 32, 0.75);
            }

            100% {
                box-shadow:  8px 16px rgba(61, 184, 143, 0.75),  -8px -16px rgba(233, 169, 32, 0.75);
            }
        }

    </style>
</head>
<body>
    <div class="loading"></div>
</body>
</html>

变换成箭头:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .arrow_div {
            width: 100px;
            height: 100px;
            background: #000;
            position: relative;
        }
        .arrow {
            width: 33px;
            height: 4px;
            display: inline-block;
            background: #fff;
            position: absolute;
            left:0;
            right:0;
        }

        .arrow_body {
            margin: auto;
            top:40px;
            -webkit-animation: 2s linear body_kf infinite;
        }

        @-webkit-keyframes body_kf {
            0% {

            }
            30%, 50% {
                -webkit-transform: rotate(180deg);
            }
            80%, 100% {
                -webkit-transform: rotate(360deg);
            }

        }

        .sleft {
            width: 33px;
            height: 33px;
            border: transparent;
            position: absolute;
            top: 25px;
            margin: 0 auto;
            left: 0;
            right: 0;
            -webkit-animation: 2s linear sleft_kf infinite;
        }
        .sleft:before {
            content: ‘‘;
            width: 33px;
            height: 4px;
            display: inline-block;
            background: #fff;
            top: 0;
            position: absolute;
            -webkit-animation: 2s linear sleft_before_kf infinite;
        }
        @-webkit-keyframes sleft_kf {
            0% {}
            30%, 50% {
                -webkit-transform: rotate(222deg);
            }
            80%,100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes sleft_before_kf {
            0%, 100%{}
            20% {
                width: 28px;
                top: 1px;
                left: 3px;
            }
            25% {
                width: 26px;
                top: 2px;
                left: 6px;
            }
            30%, 40%, 50% {
                width: 22px;
                top: 3px;
                left: 8px;
            }
            80% {
                width: 33px;
                top:0;
                left:0;
            }
        }
        .sright {
            width: 33px;
            height: 33px;
            border: transparent;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            top: 25px;
            position: absolute;
            -webkit-animation: 2s linear sright_kf infinite;

        }

        .sright:before {
            content: ‘‘;
            width: 33px;
            height: 4px;
            display: inline-block;
            background: #fff;
            bottom: 0;
            position: absolute;
            -webkit-animation: 2s linear sright_before_kf infinite;
        }
        @-webkit-keyframes sright_kf {
            0% {}
            30%, 50% {
                -webkit-transform: rotate(135deg);
            }
            80%,100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes sright_before_kf {
            0%,100% {}
            20% {
                width: 28px;
                bottom: 1px;
                right: 1px;
            }
            25% {
                width: 25px;
                bottom: 2px;
                right: 2px;
            }
            30%, 40%, 50% {
                width: 22px;
                bottom: 3px;
                right: 3px;
            }

            80% {
                width: 33px;
                bottom: 0;
                right:0;
            }
        }

    </style>
</head>
<body>
    <div class="arrow_div">
        <div class="sleft"></div>
        <i class="arrow arrow_body"></i>
        <div class="sright"></div>
    </div>
</body>
</html>
时间: 2024-10-13 04:15:14

30分钟玩转css3动画, transition,animation的相关文章

css3 transform transition animation 练习

旋转 位移 缩放 扭曲 动画 <!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title>css3 transform transition animation 练习</title> <style type="text/css"> body { padding: 10px 50px; } div { margin: 50p

CSS3动画属性animation的用法

转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和开发时间上提供了便利. animation基本语法是: animation:name keeping-time animate-function delay times iteration final; 第一个参数:name: 动画的名字,即

Swift简单入门教程:30分钟玩转Swift

通常来说,编程语言教程中的第一个程序应该在屏幕上打印“Hello, world”.在 Swift 中,可以用一行代码实现:    println("hello, world") 如果你写过 C 或者 Objective-C 代码,那你应该很熟悉这种形式——在 Swift 中,这行代码就是一个完整的程序.你不需要为了输入输出或者字符串处理导入一个单独的库.全局作用域中的代码会被自动当做程序的入口点,所以你也不需要main函数.你同样不需要在每个语句结尾写上分号. 这个教程会通过一系列编程

CSS3动画以及animation事件

1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction animation-name:动画名称 animation-name:keyframename|none(keyframename:自定义名字 none:动画无效果) animation-duration:动画执行时间   animation-duration:time(time:秒/毫秒) anima

学习CSS3动画(animation)

CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计效果也不太好).chrome和safafi建议加上前缀-webkit-以向前兼容老版本.   今天简单的做一个动画. 首先,先简单画一个div,然后添上背景图片. <body> <div class="demo"> 我是demo </div> </

CSS3动画 transition和animation的用法和区别

transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc -moz-   opera -o-  区别: transition是过度属性,需要用户自行触发,触发时间比如:点击,鼠标悬浮等 animation是动画属性,其不需要用户触发,网页加载完成后自动执行 使用: transation{过度属性 过度时间 动画类型 延迟时间} -o-transation{过

【WEB前端系列之CSS】CSS3动画之Animation

前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特效(可以自己运行看下实际效果) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title<

css3动画transition详解

transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay.下面分别来看这四个属性值 一.transition-property 语法: transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]*

css3动画属性-animation

一:动画属性参数的详解 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果.Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等. 语法 <' animation-name '>:检索或设置对象所应用的动画名称 <' animation-duration '>:检索或设置对象动画的持续时间 <' animation-timin