大家好，感谢邀请，今天来为大家分享一下深入解析：6.1版CSS3动画技术详解的问题，以及和的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
过渡审查
transition-property（指定设置过渡效果的CSS 属性的名称。）
过渡持续时间（指定完成过渡效果需要多少秒或毫秒。）
Transition-Timing-Function（指定速度效果的速度曲线。）
转换延迟（指定转换效果的延迟。）
动画中的属性
动画名称（动画名称）
动画持续时间（动画持续时间）
动画计时函数（动画速度曲线）
animation-iteration-count（动画播放次数）
动画方向（动画完成后如何运行）
animation-play-state（控制动画的播放状态）
animation-fill-mode（指定动画效果在动画播放之前还是之后可见）
过渡和动画之间的区别
Transition 是过渡效果，animation 是动画。
Transition 只能指定开始状态和结束状态的动画效果，动画可以有多个关键帧设置，以实现更丰富的动画效果。
转换需要由操作（悬停等）触发才能执行。动画可以自己执行。
两者支持的属性不同。动画有更多的属性，如迭代次数、方向、播放状态等，以增加可控性。
动画名称
动画名称： 关键帧名称|无；
指定@keyframes 动画的名称。
none 为默认值，没有动画效果。
动画持续时间
animation-duration: 时间；
定义动画完成一个循环所需的时间（以秒或毫秒为单位）。
动画计时函数
动画计时函数： 值；
指定动画的速度曲线。
线性：动画的速度从开始到结束都是相同的。
轻松：默认。动画以慢速开始，然后加速，然后减慢，最后结束。
缓入：动画以慢速开始。
缓出：动画以慢速结束。
缓入缓出：动画以较慢的速度开始和结束。
动画延迟
动画延迟： 时间；
定义动画的开始时间（延迟时间）。
时间的值为秒或毫秒，默认值为0。
动画迭代计数
动画迭代计数： n|无限；
指定元素播放动画的循环次数。
n: 定义动画播放次数。
Infinity: 指定动画应无限播放。
动画方向
动画方向： 正常|交替；
定义动画是否按顺序反向播放。
正常：默认值。动画应该可以正常播放。
交替：动画依次反向播放。
动画播放状态
动画播放状态： 暂停|运行；
属性指定动画是正在运行还是已暂停。
暂停允许动画暂时播放，运行允许动画继续播放。
动画填充模式
动画填充模式：无|向前|向后|两者；
指定动画效果在播放动画之前或之后是否可见。
无： 应用动画时，在延迟时间后和动画结束后执行动画之前，使元素呈现默认状态。
forwards: 表示动画结束后，元素将处于当前动画结束时的状态。
backs: 表示在动画开始之前，元素处于关键帧为“from”或“0%”关键帧的状态。
两者：向前+向后
关键帧
关键帧以“@keyframes”开头，后跟“动画名称”和{}。大括号里是不同时期的一些风格规则。
“@keyframes”中的样式由多个百分比组成。可以在“0%”和“100%”之间创建多个百分比。该百分比是动画期间的关键帧位置。
为每个百分比的动画效果元素添加不同的属性，使元素处于不断变化的状态。
我们可以使用“from”和“to”来表示动画的开始和结束帧位置。
当使用百分比表示起始帧时，请使用“0%”而不删除百分号。关键帧仅接受百分比值。
@keyframes的写法
@keyframes 名称{
来自{ Properties:Properties 值； }
百分比{ Properties:属性值； }
到{ Properties:属性值； }
}
@keyframes的写法
@-webkit-keyframes 名称{
0% { 属性：属性值； }
百分比{ Properties:属性值； }
100% { 属性：属性值； }
}
动画示例
@-webkit-keyframes box1 {
0% { margin-left: 100px;背景：绿色； }
40% { margin-left: 150px;背景： 橙色； }
60% { margin-left: 75px;背景：蓝色； }
100% { margin-left: 100px;背景：红色； }
}
调用动画方法
.box1 { width: 50px;高度： 50px；边距-left: 100px；背景：蓝色；
-webkit-animation-name:"box1";/动画属性名称/
-webkit-animation-duration: 5s;/动画持续时间/
-webkit-animation-timing-function: 缓入缓出； /动画频率/
19.调用动画方法
-webkit-animation-delay: 2s;/动画延迟时间/
-webkit-animation-iteration-count: 10;/定义循环数据，无限表示无限次/
-webkit-animation-direction:alternate;/定义动画循环方法/
}
3D动画
介绍了动画的基本写作方法。相信一些简单的2D动画对于大家来说已经不再困难。接下来我们就来看看如何写出更炫酷的3D动画？
CSS3transform变化、变形.
转换
变换的意思是：改变、变形；来转变。
Transform 的属性包括：rotate()/skew()/scale()/translate(,)，分别分为x 和y，如rotateX() 和rotateY() 等。
旋转
含义：旋转；
若设定值为正数，则表示顺时针旋转；若设定值为正数，则表示顺时针旋转。如果设定值为负数，则表示逆时针旋转。其中“deg”表示“度”，如“10deg”表示“10度”。
示例： 变换：旋转(30deg)
变换原点
含义：旋转基点。
该属性提供2 个参数值，第一个用于横坐标，第二个用于纵坐标；如果只提供一个，则横坐标使用该值，纵坐标默认为50%。
百分比：以百分比指定坐标值。可以为负数。
长度：用长度值指定坐标值。可以为负数。
左中右是水平方向的值，而上中下是垂直方向的值。
翻译
含义：改变、位移；
二维坐标系中的平移分为三种情况：
translate(x,y) 同时水平和垂直移动（即X轴和Y轴同时移动）；
translateX(x) 仅水平移动（X 轴移动）；
translateY(Y) 只在垂直方向移动（Y 轴移动）；
三维坐标系也同样如此。
示例：transform:translate(100px,20px)
规模
含义：缩放。
以二维坐标系为例，比例尺分为三种情况：
scale(x,y)使元素同时水平和垂直缩放（即X轴和Y轴同时缩放）；
scaleX(x)元素仅水平缩放（X轴缩放）；
scaleY(y)元素仅在垂直方向上缩放（Y轴缩放）；
缩放基数为1。如果其值大于1，则元素将被放大。否则，如果其值小于1，则该元素将被减少。
三维坐标系也同样如此。
示例：transform:scale(2,1.5)
倾斜
含义：扭曲、倾斜；
以二维坐标系为例，比例尺分为三种情况：
skew(x,y) 使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按照一定的角度值扭曲）；
skewX(x) 仅在水平方向上扭曲元素（X 轴扭曲）；
skewY(y) 仅在垂直方向上扭曲元素（Y 轴扭曲）；
三维坐标系也同样如此。
示例：transform:skew(30deg,10deg)
注意
编写3D动画时，添加transform-style: preserve-3d；属性到元素。
为了在各大浏览器中实现动画效果兼容，我们需要在属性前面添加对应的内核前缀。各个浏览器的内核前缀汇总
3D动画这一切即将结束。
关于深入解析：6.1版CSS3动画技术详解，的介绍到此结束，希望对大家有所帮助。
【深入解析：6.1版CSS3动画技术详解】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
哇！CSS3动画真的太酷了，可以做各种特别的效果。
有17位网友表示赞同！
终于不用依赖于第三方库来实现动画效果啦！
有14位网友表示赞同！
学习一下CSS3动画，就能让网页设计更有活力了。
有17位网友表示赞同！
想要制作更生动有趣的网站，学习6.1这个版本很重要啊。
有15位网友表示赞同！
看到那么多酷炫的CSS3动画示例，好想去试试看！
有8位网友表示赞同！
原来网页设计还可以这么好玩！让我对前端开发更有兴趣了。
有15位网友表示赞同！
现在做个简单的动效都不难了吧？
有8位网友表示赞同！
这个版本的更新真是让人振奋，学习起来也感觉更容易些。
有18位网友表示赞同！
网站动画不仅美观，还能提升用户体验，必学的技能啊！
有6位网友表示赞同！
以前做网页动画太麻烦了，现在终于可以用CSS3实现啦。
有7位网友表示赞同！
我想知道有哪些新的CSS动画特效在6.1版本中？
有14位网友表示赞同！
最近打算学习前端开发，这个版本的CSS3动画是一个重要的知识点。
有6位网友表示赞同！
分享一下你用CSS3动画制作的最炫网站作品吧！
有10位网友表示赞同！
学习CSS3动画能让我的设计理念更有创意的执行形式。
有12位网友表示赞同！
6.1版的更新一定会有很多新的功能，我要好好研究一下!
有18位网友表示赞同！
学习编程变得越来越有趣了，有了这些特效可以丰富网站内容！
有16位网友表示赞同！
期待更多人能够掌握CSS3动画技术，创造更加精彩的网页作品。
有9位网友表示赞同！
我的网站是不是也该加入一些动效元素了呢？
有13位网友表示赞同！
现在前端开发是一个非常热门的领域，掌握了这方面的技能就更有竞争力了!
有19位网友表示赞同！