前言

动画是css中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

提示：以下是本篇文章正文内容，下面案例可供参考

一、2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
1、语法：
transform：translate（x,y）;
或者分开写
transform：translateX（n);
transform：translateY（n);
2、重点：
定义2D转换中的移动，沿着X和Y轴移动元素；
translate最大的优点：不会影响其他元素的位置；
translate中的百分比单位是相对于自身元素的translate：（50%，50%）；
对行内标签没有效果；

2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转。
1、语法：
transform：rotate（度数）
2、重点：
rotate里面跟度数，单位是deg比如rotate（45deg）;
角度为正时，顺时针，负时，为逆时针；
默认旋转的中心点是元素的中心点；
2D转换中心点transfo-origin
1、语法：
transform-origin：x y;
2、重点：
注意后面的参数x和y用空格隔开；
xy默认转换的中心点是元素的中心点（50% 50%）;
还可以给x y设置像素或者方位名词（top bottom left right center）;

2D转换之缩放scale：缩放，顾名思义，可以放大和缩小。只要给元素添加上这个属性就能控制它放大还是缩小。
1、语法：
transform：scale（x,y）;
2、重点：
注意其中的x和y用逗号分隔；
transform：scale（1，1）：宽和高都放大一倍，相对于没有放大；
transform：scale（2，2）：宽和高都放大了2倍；
transform：scale（2）：只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2）；
transform：scale（0.5，0.5）：缩小；
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子；

二、2D动画的基本使用方法

分为两步：

先定义动画，
再使用（调用动画）

语法：
1、用keyframes定义动画
（类似定义类选择器）：
@keyframes 动画名称{
0%{
width：100px；
}
100%{
width：200px;
}
2、元素使用动画：
div{
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
//调用动画
animation-name:动画名称；
//持续时间
animation-duration:持续时间；
}

三、2D动画属性

1.常见属性

2.速度曲线属性

3.动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；
语法：
animation：myfirst 5s linear 2s infinite alternate;

注意：

简写属性里面不包含animation-play-state；
暂停动画：animation-play-state:puased;经常和鼠标经过等其他配合使用；
想要动画走回来，而不是直接跳回来：animation-direction:alternate;
盒子动画结束后，停在结束位置：animation-fill-mode:forwards;

四、2D动画的具体实现

1.奔跑熊

代码如下（示例）：

    <style>body {background-color: #ccc;}.box {position: relative;width: 100%;height: 400px;background: url(media/bg1.png) no-repeat;animation: bg1 30s linear;}div {position: absolute;top: 200px;width: 200px;height: 100px;background: url(media/bear.png) no-repeat;animation: bear 1s steps(8) infinite, move 4s forwards;}@keyframes bg1 {0% {background-position: 0, 0;}100% {background-position: -2340px 0;}}@keyframes bear {0% {background-position: 0, 0;}100% {background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;/* margin-left: -100px; */transform: translate(-50%);}}</style>
</head><body><div class="box"><div></div></div>
</body>

效果如下（示例）：

2.盒子进圈

代码如下（示例）：

<style>div {width: 200px;height: 200px;background: url(1.png);}.box {width: 39px;height: 39px;background: url(wz.jpg);animation: move 4s linear 1s forwards;}@keyframes move {0% {transform: translate(0, 0);}10% {transform: translate(160px, 0);}20% {transform: translate(160px, 160px);}30% {transform: translate(0, 160px);}40% {transform: translate(0, 40px);}50% {transform: translate(120px, 40px);}60% {transform: translate(120px, 120px);}70% {transform: translate(40px, 120px);}80% {transform: translate(40px, 80px);}100% {transform: translate(80px, 80px);}}</style>
</head><body><div><div class="box"></div></div>
</body>

效果如下（示例）：

CSS3的2D动画属性相关推荐

css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
html5+css3实现2D动画效果演示
这些代码主要实现的功能就是一些2D的动画效果,如平移动画,旋转动画等等. HTML5代码: <span style="font-size:18px;"><!doc ...
css3中的动画属性
css3样式兼容前缀正常样式:teansform 前缀写法 -o-teansform //opear -ms-teansform //ie -moz-teansform //fir ...
css3的animation动画属性实现闹钟左右摇摆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
第七章：CSS3基础---变形旋转 2d/3d、c3边框图片、变形缩放 2d/3d、变形倾斜2d、动画属性
<1..变形旋转 2d/3d> x轴旋转 transform:rotateX(数值deg) y轴旋转 transform:rotateY(数值deg) z轴旋转 transform:rot ...
CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...

CSS3的2D动画属性

文章目录

前言

一、2D转换

二、2D动画的基本使用方法

三、2D动画属性

1.常见属性

2.速度曲线属性

3.动画简写属性

四、2D动画的具体实现

1.奔跑熊

2.盒子进圈

CSS3的2D动画属性相关推荐

最新文章

热门文章