css3过渡_动力节点Java学院整理


Posted in HTML / CSS onJuly 11, 2017

刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现。所以请大家明白,特别是Web前端开发员,用CSS3做一些过渡效果和动画,并不比运用JS脚本实现要好(个人认为:用CSS只不过让不懂JS的人员(设计人员)也能做动画,而且使用浏览器封装好的方法,但使用JS脚本可以更灵活,在性能上也能去优化)。&nb

1.Transition

Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值。目前Firefox、Opera、Safari和Chrome都支持transition ,IE还不支持。
 

语法:transition: property duration timing-function delay;

说明:

css3过渡_动力节点Java学院整理

实例: 

<style type="text/css"> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
 
div:hover
{
width:300px;
}
</style>
<div></div>

2. Animation

CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等。

目前支持Animation的浏览器有:Firefox、 Safari 和 Chrome,IE和Opera还不支持。下面看下一个简单的实例:

<style type="text/css"> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /*Firefox*/
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes mymove /*Firefox*/
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
<div></div>

语法:animation: name duration timing-function delay iteration-count direction; 

说明:

css3过渡_动力节点Java学院整理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 #HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 #HTML / CSS
css3个性化字体_动力节点Java学院整理
Jul 12 #HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 #HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 #HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 #HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 #HTML / CSS
You might like
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
php header Content-Type类型小结
2011/07/03 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python复制与引用用法分析
2015/04/08 Python
python中pass语句用法实例分析
2015/04/30 Python
python getopt详解及简单实例
2016/12/30 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python argparse模块使用方法解析
2020/02/20 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
药店营业员岗位职责
2015/04/14 职场文书