html中如何设置动画效果,css3如何设置动画?
首先我们来了解一下css3实现简单动画需要用到的属性:animation属性,@keyframes“规则”。
animation属性和@keyframes“规则”是css3新增的属性,animation属性可用来给动画设置许多的CSS样式,例如color,background-color,height,或width。【推荐视频学习:css3教程,了解更多css3属性】
我们先通过@keyframes“规则”定义,再在animation属性里调用,就可以实现一个简单的动画效果了。
如下所示:实现背景颜色的不断切换
.element{
animation:pulse5sinfinite;
}
@keyframespulse{
0%{
background-color:#001F3F;
}
100%{
background-color:#FF4136;
}
}
运行后,背景颜色会不断的进行变化,在#001F3F颜色值到#FF4136颜色值过渡变化,之间也会显示一些过渡的背景色。大家可以自己动手试试效果。
每个@keyframes规则定义了在动画期间中的特定时刻应该发生的事情。例如,0%是动画的开头,100%是结束。然后可以通过速记animation属性或其八个子属性来控制这些关键帧,以更好地控制应如何操纵这些关键帧。
下面我们来看看animation属性的子属性有哪些?有什么作用?
1、animation-name:声明@keyframes要操作的at-rule的名称。
2、animation-duration:动画完成一个循环所需的时间长度。
3、animation-timing-function:建立预设的加速度曲线,如ease或linear。
4、animation-delay:正在加载的元素和动画序列的开始之间的时间。
5、animation-direction:设置循环后动画的方向。它的默认值在每个周期重置。
6、animation-iteration-count:动画应执行的次数。
7、animation-fill-mode:设置在动画之前/之后应用的值。
例如,我们可以将动画的最后状态设置为保留在屏幕上,也可以将其设置为在动画开始之前切换回。
8、animation-play-state:暂停/播放动画。
然后可以像这样使用这些子属性:
@keyframesstretch{
/*在这里声明动画的动作*/
}
.element{
animation-name:stretch;
animation-duration:1.5s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-fill-mode:none;
animation-play-state:running;
}
/*
相同:
*/
.element{
animation:
stretch
1.5s
ease-out
0s
alternate
infinite
none
running;
}
本文转载自中文网
html中如何设置动画效果,css3如何设置动画?相关推荐
- html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
- css加载更多动画效果,css3实现loading动画效果
通过css3动画实现三种loading加载动画 效果1:通过css3的border-radius与transform的rotate()实现 效果2:通过css3动画animation的animatio ...
- 【Android笔记25】Android中的动画效果之逐帧动画
这篇文章,主要介绍Android中的动画效果之逐帧动画. 目录 一.逐帧动画 1.1.什么是逐帧动画 1.2.逐帧动画的使用 (1)创建drawable动画资源<
- Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画 通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节 ...
- html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
- html5遮罩层动画,HTML5+CSS3城市场景动画
最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现.今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳.云朵.气球等动画效果:除此之外,页面 ...
- 【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开 效 ...
- HTML中淡入的动画效果,CSS3实现页面淡入动画特效代码
现在的css3有很多效果可以直接替换flash了,下面我来给大家介绍一个利用CSS3实现页面淡入动画特效代码,希望此教程 对各位同学会有所帮助. 利用CSS3动画属性"@keyframes ...
- html 气泡动画效果,css3实现好看的气泡按钮动画特效
CSS3在我们网页设计中是最关键的一环,为什么这么说呢?我们在浏览别人的网站时,经常会看到特别好看的动画效果,比如一个按钮啊,一个图片啊,每次看到都能够让人有种赏心悦目的感觉,这就使网站更具有吸引力和 ...
最新文章
- 让Asp.NET的DataGrid可排序、可选择、可分页
- Java awt Desktop 无法调用系统浏览器
- 研究人员表示Wi-Fi WPA3有重多的安全漏洞
- 【ValueError: Target is multiclass but average=‘binary‘. Please choose another average setting, one 】
- 多任务 schedule python_Python3.6 Schedule 模块定时任务 (实例讲解)
- 【HDU - 5882】Balanced Game (找规律,思维)
- win7系统应用程序安装不了的解决教程
- Php学习准备(环境)
- Linq中常用的方法
- JxBrowser的概述与简单应用
- android搜狗离线安装包,搜狗翻译离线版下载
- 概率论————思维导图(上岸必备)(一维随机变量及其分布)
- (13.1.3.9)PMBOK之三:十大知识领域之采购管理
- Options error: In [CMD-LINE]:1: Error opening configuration file: xxxx.ovpn
- [游戏安全] Unity3D游戏无意中的发现
- 《人月神话》-第16章-没有银弹
- 【高等数学】通过俩条空间直线求得公垂线的求法
- ppt6计算机考试,全国计算机考试第6章 过程.ppt
- 华为云WeLink是什么软件?什么远程办公软件好用?
- c 链表排序 - 选择排序