CSS 动画详解 animation transmation

来源：互联网发布：python数值求解编辑：程序博客网时间：2024/04/29 13:59

腾讯动画在线制作库 http://isux.tencent.com/css3/index.html?transition-property
css3 keyframe

#animation{-webkit-animation:rotateInDownLeft 1s .2s ease both;-moz-animation:rotateInDownLeft 1s .2s ease both;}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}

jq动画：animate

$("button").click(function(){  $("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });});//添加动画时间$("div").animate({height:"toggle"},200） // 200的单位是毫秒

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。
注释：使用 “+=” 或 “-=” 来创建相对动画（relative animations）。

transform:

transition-property: background-color;  transition-duration: 1s;  transition-timing-function: linear;

transform 与 animotion区别参考
http://www.tuicool.com/articles/NRVvqm

animation功能与transition都能通过改变css的属性值来实现动画效果，他们的不同之处是：transition只能指定属性的开始值和结束值来达到渐变，不能像animation那样定义关键帧来实现比较复杂的动画效果。

0 0