CSS3 的一些动画（代码及演示）

1. 过渡：

Transition(实现元素不同状态间的平滑过渡）
补间动画：从初始状态到终了状态。
帧动画：按固定顺序和速度播放。
属性：
Transition-property：all；所有属性均过渡
Transition-duration：1s；设置过渡时间
Transition-timing-function:linear;设置运动曲线
（linear 线性，ease 减速，ease-in加速，
ease-out减速， ease-in-out 先减速后加速）
Transition-delay：1s；过渡延迟
综合属性：
Transition：让哪些属性过渡过渡持续时间运动曲线延迟时间
Transition：all 3s linear 0s;
案例演示:

<style>.box1{width: 200px;height: 200px;background-color: red;margin: 100px auto;/*transition: width 2s linear 0s;*/transition: all 2s linear 0s;}.box1:hover{width: 600px;background-color: green;}</style>
</head>
<body><div class="box1"></div>
</body>

2. 2D动画

实现元素的位移，旋转，变形，缩放。
（1）缩放
Transform：scale（x，y）
Transform：scale（2，0.5）
X 为水平缩放倍数，y为垂直缩放倍数
案例:

<style>.box{width: 1000px;margin: 100px auto;}.box div{width: 300px;height: 150px;background-color: red;float: left;margin-right: 15px;color: white;text-align: center;}.box .box2{background-color: green;transition:all 2s linear 0s;}.box .box2:hover{background-color: blue;transform: scale(2,0.5);}</style>
</head>
<body><div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
</body>

(2) 位移
Transform：translate（水平，垂直）
Transform：translate（-100px，100px）
实例:

    <style>.box {width: 200px;height: 200px;background: green;transition: all 1s;}.box:hover {transform: translateX(100px);}</style>
</head>
<body>
<div class="box"></div>
</body>

(3)旋转：
Transform：rotate（90deg);
实例：

<style>.box{width: 1000px;margin: 100px auto;}.box div{width: 300px;height: 150px;border:1px solid #000;background-color: red;float: left;margin-right: 30px;}div:nth-child(2) {background-color: pink;transition: all 2s linear 0s;}div:nth-child(2):hover {transform: rotate(-360deg);}</style>
</head>
<body><div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
</body>

3.3D动画：

（1）3D旋转
transform：rotateX(360deg）/rotateY/rotateZ
实例：

<style>.box{width: 1000px;margin: 100px auto;}.box div{width: 300px;height: 150px;border:1px solid #000;background-color: red;float: left;margin-right: 30px;}div:nth-child(2) {background-color: pink;transition: all 2s linear 0s;}div:nth-child(2):hover {transform: rotate(-360deg);}</style>
</head>
<body><div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
</body>

（2）3D位移
Transform:TranslateX/Y/Z;
实例：

<style>.rotateX {width: 300px;height: 226px;margin: 200px auto;perspective: 110px;}img {transition: transform 2s;}.rotateX:hover img {transform: translateX(100px);}</style>
</head>
<body>
<div class="rotateX"><img src="data:images/1.jpg" alt=""/>
</div>
</body>

（3）3D立方体：

<style>.box {width: 250px;height: 250px;border: 1px dashed red;margin: 100px auto;position: relative;/*border-radius: 50%;*//* 让子盒子保持3d效果*/transform-style: preserve-3d;/*transform:rotateX(30deg) rotateY(-30deg);*/animation: gun 8s linear infinite;}.box > div {width: 100%;height: 100%;position: absolute;text-align: center;line-height: 250px;font-size: 60px;color: #daa520;}.left {background-color: rgba(255, 0, 0, 1);/* 变换中心*/transform-origin: left;/* 变换*/transform: rotateY(90deg) translateX(-125px);}.right {background: rgba(0, 0, 255, 1);transform-origin: right;/* 变换*/transform: rotateY(90deg) translateX(125px);}.forward {background: rgba(255, 255, 0, 1);transform: translateZ(125px);}.back {background: rgba(0, 255, 255, 1);transform: translateZ(-125px);}.up {background: rgba(255, 0, 255, 1);transform: rotateX(90deg) translateZ(125px);}.down {background: rgba(99, 66, 33, 1);transform: rotateX(-90deg) translateZ(125px);}@keyframes gun {0% {transform: rotateX(0deg) rotateY(0deg);}100% {transform: rotateX(360deg) rotateY(360deg);}}</style>
</head>
<body>
<div class="box"><div class="up">上</div><div class="down">下</div><div class="left">左</div><div class="right">右</div><div class="forward">前</div><div class="back">后</div>
</div>
</body>

4.3D精灵图：

<style>body{background-color: white;}.box{width: 280px;height:280px;/*border:1px solid black;*/margin: 100px auto;position: relative; }.box > div{width: 100%;height: 100%;position: absolute;/*border:1px solid black;*/border-radius: 50%;transition: all 2s linear 0s;backface-visibility: hidden;}.box1{background:url(images/1.jpg) left 0 no-repeat;}.box2{background:url(images/2.jpg) right 0 no-repeat;transform: rotateY(180deg);}.box:hover .box1{transform: rotateY(180deg);}.box:hover .box2{transform: rotateY(0deg);}</style>
</head>
<body><div class="box"><div class="box1"></div><div class="box2"></div></div>
</body>

4. animation动画

Animation属性格式：
Animation：动画名称持续时间执行次数方向运动曲线执行延迟
（1）动画名称
Animation-name：donghua；
（2）执行一次时间
Animation-duration：4s；
（3）执行次数
animation-iteration-count：1；

（4）动画方向
Animation-direction：normal/alternate
（5）动画执行延迟
Animation-delay：1s；
（6）结束后效果：
（7）Animation-fill-mode：forwards 末尾状态
Backwards 初始状态
动画实例：

<style>.box{width: 150px;height: 150px;background-color: red;margin: 100px auto;animation: donghua 4s linear 0s;}@keyframes donghua{0%{transform: translateX(0px) translateY(0px);background-color: red;}25% {transform: translateX(500px) translateY(0px);}50% {transform: translateX(500px) translateY(200px);background-color: green;}75% {transform: translateX(0px) translateY(200px);}100% {transform: translateX(0px) translateY(0px);background-color: red;}}</style>
</head>
<body><div class="box"></div>
</body>

css3的一些动画（代码及演示）相关推荐

用css3风车转动动画代码
下载地址主要用CSS3代码实现转动动画transform: rotate(360deg); dd:
css3恐龙蛋孵化动画代码
下载地址css3代码实现的恐龙蛋裂开动画,css3恐龙蛋孵化出小恐龙的动画效果. dd:
css3南瓜幽灵动画代码
下载地址使用css3实现万圣节三个南瓜头和幽灵的动画效果 dd:
html滚轮下拉动画,html5+css3齿轮滚动动画代码
HTML5制作齿轮滚动动画效果. 文件引用: setInterval(function () { move('.sec4-img-1').set('bottom', '300px').set('opa ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
css海浪动画代码,CSS3实现的线条波浪动画效果
演示: http://demo.shanhubei.com/demo/waveAnimation/ 这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使 ...
右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...

css3的一些动画（代码及演示）