CSS动画效果入门

来源：互联网发布：钢管租赁软件下载编辑：程序博客网时间：2024/05/16 10:49
简介
只用CSS3实现动画效果。基本代码
定义一个动画对象
<div id="box"></div>
定义基本样式
#box{  width:100px;  height:100px;  background-color:blue;}
通过以上代码定义一个蓝色四边形。改变动画颜色
        #box{            width:100px;            height:100px;            background-color:blue;            animation-name: anime; /*　分配动画名 */            animation-duration: 3s; /* 动画执行时间 */        }        /* 动画 */        @keyframes anime        {            100% {                background-color:red;            }        }
四边形从蓝色3秒后完全变成红色。新增三个部分内容：- 声名动画动画代码中的%号，指定执行过程中对应的CSS状态。本例子中，不是3秒后，突然变成红色，而是3秒内随着状态到达100%，颜色渐渐变红。- 指定动画名- 动画执行时间滑动
四边形向右滑动        #box{            width:100px;            height:100px;            background-color:blue;            position: relative;            animation-name: anime; /*　分配动画名 */            animation-duration: 3s; /* 动画执行时间 */        }        /* 动画 */        @keyframes anime        {            0% {                left: 0px;            }            100% {                left: 500px;            }        }
0%: 定义四边形滑动的初始位置100%: 定义四边形滑动的最终位置3s: 动画执行的时间实现了四边形时，3秒后向右移动500像素。旋转
        #box{            width:100px;            height:100px;            background-color:blue;            animation-name: anime; /*　分配动画名 */            animation-duration: 3s; /* 动画执行时间 */        }        /* 动画 */        @keyframes anime        {            100% {                transform:rotate(360deg);            }        }
100%： 定义旋转结束后四边形对就的角度大小变化
        #box{            width:100px;            height:100px;            background-color:blue;            animation-name: anime; /*　分配动画名 */            animation-duration: 3s; /* 动画执行时间 */        }        /* 动画 */        @keyframes anime        {            100% {                transform:scale(0.1);            }        }
3秒后，变成原大小的10%。指定循环次数
        #box{            width:100px;            height:100px;            background-color:blue;            animation-name: anime; /*　分配动画名 */            animation-duration: 3s; /* 动画执行时间 */            animation-iteration-count: infinite; /* 无限循环 */            /*animation-iteration-count: 2;*/  /* 2次循环 */        }        /* 动画 */        @keyframes anime        {            100% {                transform:scale(0.1);            }        }
animation-iteration-count: 指定循环次数。 （infinite：无限循环）运动模式变化
        #box{            width:100px;            height:100px;            background-color:blue;            position: relative;            animation-name: anime; /*　分配动画名 */            animation-duration: 3s; /* 动画执行时间 */            animation-timing-function: linear; /* 匀速*/            /*animation-timing-function: ease;  !* 渐变加速*!*/            /*animation-timing-function: ease-in;  !* 渐入式加速*!*/            /*animation-timing-function: ease-out;  !* 渐出式减速*!*/            /*animation-timing-function: ease-in-out;  !* 渐入渐出*!*/        }        /* 动画 */        @keyframes anime        {            0% {                left: 0px;            }            100% {                left: 500px;            }        }
animation-timing-function: 指定运动的模式本文代码
github相关源码参考链接
https://qiita.com/kuniatsu/items/eef304ce567384e4de6b

查看原文：http://www.huuinn.com/archives/224
更多技术干货：风匀坊
关注公众号：风匀坊
阅读全文
0 0