css3动画属性详解之transform、transition、animation
来源:互联网 发布:网络直播平台策划方案 编辑:程序博客网 时间:2024/04/30 09:04
css3动画属性详解:
关于CSS3制作动画的几个属性:变形(transform)、转换(transition)和动画(animation)。
一、transform
属性:
旋转rotate
(中心为原点)
扭曲、倾斜skew
(skew(x,y), skewX(x), skewY(y))
缩放scale
(scale(x,y), scaleX(x), scaleY(y))
移动translate
(translateX,translateY)
矩阵变形matrix
。
各个属性的用法:
transform:rotate()
:旋转;其中“10deg”表示“10度”。
transform: rotate(10deg);
transform:skew()
:倾斜;
transform: skew(20deg);
transform:scale()
:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。
transform: scale(1.5);
transform:translate()
:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。
transform: translate(120px,0);
综合在一起:(效果是动态)
.demo{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}.demo:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}
二、transition
css的transition允许css的
属性值
在一定的时间区间
内平滑地
过渡。
四个属性:
transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变);all(所有属性改变)这个也是其默认值;indent(元素属性名)。当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值。
transition-duration是用来指定元素,转换过程的持续时间
transition-timing-function:
transition-delay[延迟] :是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果
综上所述,相对应的一个示例代码:
a { transition: background 0.5s ease-in,color 0.3s ease-out; transition:transform .4s ease-in-out; }
缩略图实例(原文:Anselm Urban):http://codepen.io/SitePoint/p...
三、animation(@keyframes规则)
CSS3中添加的新属性
animation
是用来为元素实现动画效果的,但是animation
无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes
。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-
等前缀以适应不同的浏览器。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
通过 @keyframes 规则,您能够创建动画。
@keyframes定义一个动画,并定义具体的动画效果,比如是放大还是位移等等。
@keyframes 它定义的动画并不直接执行,需要借助animation来运转。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
百分比是指动画完成一遍的时间长度的的百分比 ,0% 是动画的开始时间,50%是动画完成一半的时间,100% 动画的结束时间。百分比后面的花括号写:在动画执行过程中的某时间点要完成的变化。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
语法
@keyframes animationname {keyframes-selector {css-styles;}}
合法的值:
1. 0-100%
2. from(与 0% 相同)
3. to(与 100% 相同)css-styles必需。一个或多个合法的 CSS 样式属性。
例子1:
名字为
gif
的@keyframes
,动画完成需要的总时长为1.4s
,刚开始的时候图片旋转为0度,动画完成的时候图片旋转360度
.load-border { width: 120px; height: 120px; background: url(../images/loading_icon.png) no-repeat center center; -webkit-animation: gif 1.4s infinite linear; animation: gif 1.4s infinite linear; }@keyframes gif { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}
例子2:
名字为
mymove
的@keyframes
,动画完成需要的总时长为1s
,刚开始的时候图片距顶部距离为0px
,0.25s
后图片距顶部距离为200px
,0.5s
后图片距顶部的距离为100px
,以此类推
.img { width: 120px; height: 120px; background: url(../images/icon.png) no-repeat center center; -webkit-animation: gif 1.4s infinite linear; animation: mymove 1s infinite linear;}@keyframes mymove{ 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;}}
例子3:
在一个动画中改变多个 CSS 样式:
@keyframes mymove{ 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;}}
- css3动画属性详解之transform、transition、animation
- css3动画属性详解之transform、transition、animation
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3中和动画有关的属性transform、transition 和 animation
- css3动画模块transform transition animation属性解释
- CSS3中的动画,animation、transition和transform属性的运用
- CSS3中的动画,animation、transition和transform属性的运用
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3动画--keyframes,transform,animation,transition
- 关于css3 transition transform animation属性
- CSS3 Transform、Transition和Animation属性总结
- css3 动画之transition,animation
- CSS3 Transform & Transition & Animation
- CSS3 Transform 变形(transform)、转换(transition)和动画(animation)
- CSS3中和动画有关的属性有三个 transform、 transition 和 animation
- CSS3动画的属性主要分为三类:transform、transition以及animation。
- CSS3--Transition,Transform和Animation
- 注册之发邮件
- 【计算机未响应】apphangb1
- 日常练习之抽象类
- 交叉编译搜索不到指定文件的解决办法
- spring-boot(二) 整合jpa
- css3动画属性详解之transform、transition、animation
- 盒子嵌套内盒margin-top失效解决方案
- 研究生如何发表论文必读
- 自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法
- centOS7 下Nginx的简单安装配置
- Spring MethodInvokingFactoryBean注入Method值
- SourceTree最新使用方法以及github多人开发方法
- 记忆网络之Dynamic Memory Networks模型介绍及代码实现
- 关于主从集群