189 8069 5689
这篇文章主要介绍“CSS3中的动画技术怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3中的动画技术怎么用”文章能帮助大家解决问题。
成都创新互联是专业的上栗网站建设公司，上栗接单;提供网站制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行上栗网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
一、transform-origin
CSS变形的原点，默认是对象的中心点。transform-origin接受两个参数，他们可以是百分比、em、px等具体的值，也可以是left、right、center、top、middle、bottom等关键字。
例如：
transform-origin: top right;-o-transform-origin: top right;-moz-transform-origin: top right;-webkit-transform-origin: top right;
transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;
transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;
transform-origin: 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;
二、transition--过渡
1.transition-property：定义转换动画的CSS属性名称。可以是none|all|CSS属性列表。
例如：
transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition-property:background-color;
2.transition-duration：定义转换动画的时间长度。
例如：
transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;
3.transition-delay：定义过渡动画的延迟时间。
例如：
transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;
4.transition-timing-function：定义转换动画的效果。
取值可以是：
ease：缓解效果。
ease-in：渐显效果。
ease-out：渐隐效果。
ease-in-out：渐显渐隐效果。
linear：线性效果。
cubic-bezier：特殊的立方贝塞尔曲线效果。cubic-bezier(0.3, 0, 0.5, 1.0)。
例如：
transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition-timing-function: linear;
三、animation
1.animation-name：动画名字。
2.animation-duration：动画时间。
3.animation-timing-function：动画播放方式。
4.animation-delay：动画开始播放时间。
5.animation-iteration-count：播放次数。infinite表示无限次。。
6.animation-direction：动画播放方向。normal--动画的每次循环都向前 alternate--第偶数次向前，奇数次向后。
例如：
div {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: ani;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/*下面调用动画 */
@-webkit-keyframes ani {
0% {
-webkit-transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
75% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
关于“CSS3中的动画技术怎么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。