css的简单动画
发布在css专栏2016年9月27日view:1371css3
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

一、首先来看个实例:

实例一:

@keyframes flash {
            0%,
            50%,
            100% {
                opacity: 1;
            }
            25%,
            75% {
                opacity: 0;
            }
        }
        //把 "flash " 动画捆绑到 class名字为flash元素,时长:5 秒:
        .flash {
            width: 100px;
            height: 100px;
            background: red;
            animation: flash 5s;
            -moz-animation: flash 5s;
            /* Firefox */
            -webkit-animation: flash 5s;
            /* Safari and Chrome */
            -o-animation: flash 5s;
            /* Opera */
            animation-name: flash;
        }

这是很简单的css3的动画了。代码的效果:像flash一样,在5秒钟内闪动两下。记得在引用css的元素上边animation-name,引进命名的元素名字,写上元素的时间即可完成一个简单的css动画啦。

实例二:

@keyframes bounce {
            0%,
            20%,
            53%,
            80%,
            100% {
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transform: translate3d(0, 0, 0);
            }
            40%,
            43% {
                transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                transform: translate3d(0, -30px, 0);
            }
            70% {
                transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
                transform: translate3d(0, -15px, 0);
            }
            90% {
                transform: translate3d(0, -4px, 0);
            }
        }

        .bounce {
            width: 100px;
            height: 100px;
            background: red;
            animation: bounce 5s;
            -moz-animation: bounce 5s;
            /* Firefox */
            -webkit-animation: bounce 5s;
            /* Safari and Chrome */
            -o-animation: bounce 5s;
            /* Opera */
            animation-name: bounce;
            transform-origin: center bottom;
        }

这个例子,引出了两个比较典型的css动画用到的参数,一个是cubic-bezier,另一个是 translate3d。 要想做出酷炫的例子,那么这两个参数还是必须要去了解一下的。这个css动画就像是一个物体从空中坠地,然后在地上弹跳几次。

CSS3的3D转换translate3d(x,y,z)函数:语法结构:translate3d(x,y,z);按照字面的意思就可以知道,1.x:表示在x轴方向的位移。 2.y:表示在y轴方向的位移。 3.z:表示在z轴方向的位移。

这里最难理解的就是z轴的方向位移了。其实说白了就是一个放大缩小,z轴越大,那么元素将越大。

贝塞尔曲线(cubic-bezier),其实简单的说就是控制动画的速度,比如匀速进行的linear,表达式就是cubic-bezier(0.0, 0.0, 1.0, 1.0),它的函数语法结构就是cubic-bezier(<x1>, <y1>, <x2>, <y2>)。常用的曲线除了上面的linear,还有: 1、ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) 2、 ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) 3、ease-out: cubic-bezier(0, 0, 0.58, 1.0) 4、ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

我们再来看看 实例三:

//x轴360°翻转
@keyframes flipOutX {
            0% {
                transform: perspective(400px);
            }
            30% {
                transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
                opacity: 1;
            }
            100% {
                transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
                opacity: 0;
            }
        }


        .flipOutX {
            width: 100px;
            height: 100px;
            background: red;
            animation: flipOutX 5s;
            -moz-animation: flipOutX 5s;
            /* Firefox */
            -webkit-animation: flipOutX 5s;
            /* Safari and Chrome */
            -o-animation: flipOutX 5s;
            /* Opera */
            animation-name: flipOutX;
            animation-duration: .75s;
            backface-visibility: visible !important;
        }

//y轴360°翻转
@keyframes flipOutY {
            0% {
                transform: perspective(400px);
            }
            30% {
                transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
                opacity: 1;
            }
            100% {
                transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
                opacity: 0;
            }
        }

        .flipOutY {
            width: 100px;
            height: 100px;
            background: red;
            animation: flipOutY 5s;
            -moz-animation: flipOutY 5s;
            /* Firefox */
            -webkit-animation: flipOutY 5s;
            /* Safari and Chrome */
            -o-animation: flipOutY 5s;
            /* Opera */
            backface-visibility: visible !important;
            animation-name: flipOutY;
            animation-duration: .75s;
        }

这里边也有两个参数需要掌握一下的。第一个,perspective 。这个属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。而这里用了这个属性,基本上没有什么改变,原理大家也都知道了。

那么控制这个动画最重要的属性就是 rotate3d了,3d旋转,语法结构是(x,y,z,deg),把握好最后一个参数就可以了。

评论
发表评论
暂无评论
WRITTEN BY
往返的扁舟
一个符号不能代表什么;一堆符号能代表好多。
TA的新浪微博
PUBLISHED IN
css专栏

css相关代码在这里。

我的收藏