transform animation transition css3动画
2015-12-16 13:03
651 查看
transform
定义
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
值
应用
如果transform与transition联合起来用,就能实现绚丽的动画效果,for example~但是如果直接应用在某个元素上,
animation
定义
animation 属性是一个简写属性,用于设置六个动画属性:
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间,以秒或毫秒计
animation-timing-function 规定动画的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、step-start、
step-end、steps(<number>[, [ start | end ] ]))
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
transition
transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。(linear、ease、ease-in、ease-out...)
transition-delay 定义过渡效果何时开始。
animation暂停动画和transition暂停
但是如果要停止transition运动的话,强制改变目标过渡值的处理
但是这样是有问题的,下一次的启动必须等上一次动画的时间结束
定义
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
值
应用
如果transform与transition联合起来用,就能实现绚丽的动画效果,for example~但是如果直接应用在某个元素上,
transform属性是静态属性,不是动画属性,一旦写到style里面,将会直接显示作用,无任何变化过程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ height: 100px; width: 100px; background-color: red; margin-top: 100px; margin-left: 200px; border-radius: 100%; } div:hover{ transform: rotate(50deg); transition:1s; } </style> </head> <body> <div>我是一个圆</div> </body> </html>
animation
定义
animation 属性是一个简写属性,用于设置六个动画属性:
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间,以秒或毫秒计
animation-timing-function 规定动画的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、step-start、
step-end、steps(<number>[, [ start | end ] ]))
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
.slowWalk { /*规定 @keyframes 动画的名称。*/ -webkit-animation-name: person-slow; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/ -webkit-animation-duration: 950ms; /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/ -webkit-animation-iteration-count: infinite; /*动画切换的方式是一帧一帧的改变*/ -webkit-animation-timing-function: steps(1, start); -moz-animation-name: person-slow; -moz-animation-duration: 950ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; } /* 普通慢走 */ @-webkit-keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } } @-moz-keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; }
transition
transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。(linear、ease、ease-in、ease-out...)
transition-delay 定义过渡效果何时开始。
animation暂停动画和transition暂停
.pauseWalk { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; }
但是如果要停止transition运动的话,强制改变目标过渡值的处理
var left = $boy.css('left'); // 强制做了一个改变目标left的处理 // 动画是要运行10秒,所以此时动画还是没有结束的 $boy.css('left',left); // 增加暂停的样式 $boy.addClass('pauseWalk');
但是这样是有问题的,下一次的启动必须等上一次动画的时间结束
相关文章推荐
- CSS-如何引入-格式
- css常见问题
- input输入框清除样式
- HTML/CSS中有序<ol&g bfb7 t;、无序<ul>、定义列表用法详解
- 【转】html使用css让文字超出部分用省略号三个点显示的方法案例
- css控制文字显示长度
- css3d动画学习心得2:一个小游戏实践
- IE8中伪元素动态作用样式不重绘bug记录
- css设置div圆角
- css3属性集合
- css-实现元素垂直居中对齐
- css-实现元素垂直居中对齐
- CSS学习笔记
- CSS3 中FLEX快速实现BorderLayout布局
- CSS3中更灵活的布局方式
- CSS3中动画transform必须要了解的Skew变化原理
- CSS动画:Transform中使用频繁的scale,rotate,translate动画
- CSS Sprite——CSS雪碧图
- 常见错误8-搭建hexo,本地server成功,部署到github上之后不能显示主题样式
- [How to]使用自定义cell进行tableview的创建,适用于cell样式不发生变化的情况。