CSS3中的动画,animation、transition和transform属性的运用

CSS3中使用animation属性,可以不适用JavaScript而制作动画,运用的好,可以做到很多漂亮的效果,最近有空,来摸索一下animation的使用,做几个demo玩玩

animation属性的介绍

animation属性能够改变元素的位置和各种css属性

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name 需要绑定到选择器的keyframe的名称(由@keyframe自定义在下边)
  • animation-duration 规定完成动画花费的时间,以s或者ms为单位(速度)
  • animation-timing-function 规定动画的速度曲线(linear|ease|ease-in|ease-out|ease-in-out|还有其他曲线)
  • animation-delay 规定动画开始之前的延迟(s为单位,可以是负值,负值时表示一开始跳过前边的2s动画,即直接从动画第2秒的地方开始)
  • animation-iteration-count 规定动画应该播放的次数(默认1,可填数字次数,还有infinite无限次)
  • animation-direction 规定是否应该轮流反向播放动画(默认normal,还有alternate表示可以正反往复播放)

创建动画

上边的animation-name属性,需要填写一个自定义的动画名称,这就需要我们创建动画。在css3中,使用@keyframes规则来创建动画。但是这里要特别注意,目前的浏览器都不支持@keyframes,所以在使用的时候,要写成下边的形式:

  • @keyframes+name
  • @-moz-keyframes+name ———Firefox
  • @-o-keyframes+name ————-Opera
  • @-webkit-keyframes+name ——Safari 和 Chrome

定义和用法

  • 通过 @keyframes 规则,您能够创建动画。
  • 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
  • 以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0%和 100%。
  • 0% 是动画的开始时间,100% 动画的结束时间。
  • 为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
    注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

例如:

//这里我只写了一个,实际上要注意不同的浏览器支持不同,同一个mymove要用不同的keyframes格式定义多次
@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

———————————————————–我是分割线————————————————————-

transition属性的介绍

transition属性用于平滑过渡,在hover或者click的时候,改变各种css属性时,实现平滑过渡,而不是瞬间改变

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property 要过渡的css属性名(还可以是none,即都不;和all,即全部属性都过渡)
  • transition-duration 完成过渡所需的时间,s或者ms
  • transition-timing-function 过渡效果的速度曲线(linear|ease|ease-in|ease-out|ease-in-out|还有其他曲线)
  • transition-delay 过渡开始之前的延迟

但是这里要特别注意,为了满足不同浏览器的支持,要写成下边的形式:

div
{
width:100px;
height:100px;
background:blue;
//改变宽度  在2s内改变   线性改变   延迟1s后改变
transition:width 2s linear 1s;
-moz-transition:width 2s linear 1s; /* Firefox 4 */
-webkit-transition:width 2s linear 1s; /* Safari and Chrome */
-o-transition:width 2s linear 1s; /* Opera */
}

div:hover
{
width:300px;
}

———————————————————–我是分割线————————————————————-

transform属性的介绍

transform属性指变换,包括拉伸,压缩,旋转,偏移等等。
transform分为2D转换和3D转换,下边分别来说。

transform的2D转换:

  • translate(left(px),top(px)) 偏移:通过两个参数改变位置
  • rotate(顺时针旋转角度(deg)) 旋转:角度可以是负值,此时表示逆时针旋转
  • scale(x轴方向缩放,y轴方向缩放) 缩放:缩放倍数,1为不变,0.5为缩到一半,2为两倍
  • skew(沿x轴水平翻转角度(deg) 翻转:沿y轴垂直翻转角度(deg)) 注意旋转跟翻转的区别
  • matrix() 该方法把所有的2D转换方法放在一起,这里涉及矩阵转换,下边只写个简单的结论:
    1.matrix()做偏移
    matrix(n,n,n,n,水平偏移距离(即translate-left),垂直偏移距离(即translate-top))
    2.matrix()做旋转
    matrix(cosθ , sinθ , -sinθ , cosθ , n , n )
    对旋转来说rotate(θdeg)方式就简单很多。
    3.其他详情见大神的这篇博客,讲的很详细。

但是这里要特别注意,为了满足不同浏览器的支持,要写成下边的形式:

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);   /* IE 9 */
-webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);  /* Firefox */
}

transform的3D转换:

  • rotateX(旋转角度(deg)) 沿水平方向旋转(中水平线)
  • rotateY(旋转角度(deg)) 沿垂直方向旋转(中垂线)

你可能感兴趣的:(学习笔记,CSS)