css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程
以下讨论的是和css3 动画 属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:
讲解一下css3中的动画属性animation应用场景及编写代码教程
css3动画(animation)具有以下属性:
1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成,默认值是0;
3、animation-timing-function 动画的时间曲线,linear 匀速, ease 先慢后快,结束前变慢 。
4、animation-delay 动画在启动前的延迟间隔,默认是0
5、animation-iteration-count 动画的播放次数,默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。 值:paused 指定暂停动画 ; running 指定正在运行的动画,默认。
实例:本demo以平移(translate)为例说明动画的整个过程
html:
css:
.warp{
height: 100px;
width: 100px;
border: 1px solid #eee;
animation-name:moves;
animation-direction:alternate;
animation-delay: 0.2s;
animation-duration: 5s;
animation-play-state: paused;
animation-iteration-count: 3;
/*以上可以简写成:*/
animation: moves 5s linear 0.2s 3;
}
@keyframes moves{ /*动画名称自定义*/
10%{ /*时间点可以任意,10%表示当时间进行到10%是元素要达到的状态*/
transform: translate(100px,0);
-ms-transform:translate(100px,0); /*IE 9*/
-moz-transform:translate(100px,0); /* Firefox */
-webkit-transform:translate(100px,0); /* Safari 和 Chrome */
-o-transform:translate(100px,0); /* Opera */
}
30%{ /*时间点可以任意*/
transform: translate(100px,100px);
-ms-transform:translate(100px,100px); /*IE 9*/
-moz-transform:translate(100px,100px); /* Firefox */
-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
-o-transform:translate(100px,100px); /* Opera */
}
60%{ /*时间点可以任意*/
transform: translate(0,100px);
-ms-transform:translate(0,100px); /*IE 9*/
-moz-transform:translate(0,100px); /* Firefox */
-webkit-transform:translate(0,100px); /* Safari 和 Chrome */
-o-transform:translate(0,100px); /* Opera */
}
100%{ /*时间点可以任意*/
transform: translate(0,0);
-ms-transform:translate(0,0); /*IE 9*/
-moz-transform:translate(0,0); /* Firefox */
-webkit-transform:translate(0,0); /* Safari 和 Chrome */
-o-transform:translate(0,0); /* Opera */
}
}
css3中的动画属性animation应用场景及编写代码教程文章就讲到这里,欢迎浏览本站的其它内容,点击这里返回首页
css情景动画,css3中的动画属性animation应用场景及编写代码教程相关推荐
- css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些 发布时间:2021-04-02 17:39:08 来源:亿速云 阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
- css3中的动画学习分享
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation). css3动画: 使元素从一种样式逐渐变化为另一种样式的效果. 动画原理:通过把人物的表情.动作.变化等分解后画 ...
- css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
- css实现加载中loading动画效果
1 效果 2 实现原理 原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
- css3中的box-sizing属性
盒子宽度.高度计算公式: css元素宽度 = width + padding + border css元素高度 = height + padding + border css3之前,当我们需要呈现一个 ...
- html怎么设置出场动画,CSS3 元素出现动画实例
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? css3中实现动画一般有两种方式,一个是transition过渡,一个是animation动画.最主要区别就是trans ...
- 什么是css选择器?css3中5种常见的基本选择器-web前端教程
本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一:什么是css选择器? CSS是一种用于屏幕上渲染html, ...
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
关于工具: 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rg ...
- C#中的快捷键,可以更方便的编写代码
C#中的快捷键,可以更方便的编写代码 CTRL + SHIFT + B 生成解决方案 CTRL + F7 生成编译 CTRL + O 打开文件 CTRL + SHIFT + O 打开项目 CTRL + ...
最新文章
- 神州数码c语言笔试题,神州数码 面试
- PHP 页面静态化/纯静态化/伪静态化
- Shell中各种括号的作用:()、(())、[]、[[]]、{}、>、>>、$()、${}
- 世界编程大赛第一名编写的程序-3D世界
- (day 11 - 模拟)剑指 Offer 29. 顺时针打印矩阵
- 陆兆禧 阿里巴巴CEO
- CDA第九届认证考试数据报告重磅发布!
- Python中import的用法
- 系统分析员、系统架构师、项目经理的区别
- 【FFT】HDU4609-3 idiots
- 该网页无法正常运作 HTTP ERROR 500
- linux 脚本 expected,使用expect实现shell中scp自动输入密码
- MySQL数据库程序设计(三)
- anaconda prompt和cmd和powershell和anaconda powershell prompt和git bash有什么区别
- 掌握这5款 Edge插件,让你的浏览器使用更高效!
- day69 【哈希,HashSet,HashMap】
- 推荐几本适合初学者的Java书籍
- register hotkey
- JavaGUI编程 -- 窗口监听事件和键盘监听事件(AWT)
- Linux Shell脚本:探测同网段主机及对应MAC地址