登录  /  注册
首页 > web前端 > css教程 > 正文

CSS3中动画技术的实现步骤

php中世界最好的语言
发布: 2017-12-01 11:12:42
原创
2986人浏览过

在css3中如果需要实现动画效果,会用到三种技术,ransform-origin,transition,ransition-delay和transition-timing-function,今天就给大家缕清思路,看看动画效果要怎么实现。

一、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);
}
登录后复制

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

CSS3关于background-size属性的详细介绍

CSS3关于translate属性的详细介绍

CSS3的filter属性详细介绍

以上就是CSS3中动画技术的实现步骤的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号