首页 > 代码库 > CSS3动画

CSS3动画

2024-08-24 16:21:44   224人阅读

移动端的开发也有这种hack，来解决可能的卡顿问题：

css-webkit-transform: translate3d(0, 0, 0);


css3动画大致分三类：


1.变形

  • transform[变形基础]
  • rotate()[旋转]
  • scale()[缩放]
  • translate()[位移]
  • skew()[倾斜]
  • matrix()[矩阵变形]
  • perspective[透视] 

说明

transform属性能对元素对象进行变形操作，主要包括以下几种：旋转rotate、缩放scale、移动translate、倾斜skew以及矩阵变形matrix。

取值

none:表示不进行变换；

<transform-function>:表示一个或多个变换函数，以空格分开，因此可以同时对一个元素进行transform的多种属性操作。

  • 1.rotate(<angle>):旋转元素
  • 2.scale(<number>[, <number>]):缩放元素
  • 3.translate(<translation-value>[, <translation-value>]):移动元素
  • 4.skew(<angle> [,<angle>]):倾斜元素
  • 5.matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩阵变形
  • 6.perspective(length):透视

示例：transform:rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);


实例代码:

css
  1. .demo_rotate{
  2.     -webkit-transition:1s ease all;
  3.     -moz-transition:1s ease all;
  4.     padding:10px;
  5.     margin:90px auto;
  6. }
  7. .demo_rotate:hover{
  8.     -webkit-transform:rotate(360deg) scale(1.2,1.2);
  9.     -moz-transform:rotate(360deg) scale(1.2,1.2);
  10.     background:#ff9900;
  11. }
 HTML
  1. <div class="demo_box demo_rotate">鼠标经过变大1.2倍、旋转360度并改变背景色。</div>          
效果预览：http://runjs.cn/code/tom5me9d

2.过渡

  • transition-property[过渡的CSS属性]
  • transition-duration[过渡时间]
  • transition-delay[延迟时间]
  • transition-timing-function[过渡效果]


transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。http://www.w3.org/TR/css3-transitions/

transition可以和Transform同时使用。

transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。


实例代码

CSS
  1. .transition_property_1{
  2.     -webkit-transition:0.5s ease;
  3.     -moz-transition:0.5s ease;
  4.     -webkit-transition-property:all;
  5.     -moz-transition-property:all;
  6.     position:absolute;
  7.     left:10px;
  8.     top:50px;
  9. }
  10. .transition_property_2{
  11.     -webkit-transition:0.5s ease;
  12.     -moz-transition:0.5s ease;
  13.     -webkit-transition-property:none;
  14.     -moz-transition-property:none;
  15.     position:absolute;
  16.     left:250px;
  17.     top:50px;
  18. }
  19. .transition_property_3{
  20.     -webkit-transition:0.5s ease;
  21.     -moz-transition:0.5s ease;
  22.     -webkit-transition-property:width;
  23.     -moz-transition-property:width;
  24.     position:absolute;
  25.     left:480px;
  26.     top:50px;
  27. }

  29. .transition_property_1:hover,
  30. .transition_property_2:hover,
  31. .transition_property_3:hover{
  32.     width:500px;
  33.     height:300px;
  34. }

  1. <div class="demo_box transition_property_1">变换所有的属性</div>
  2. <div class="demo_box transition_property_2">不变换任何属性</div>
  3. <div class="demo_box transition_property_3">只变换宽度属性</div>
效果预览：http://runjs.cn/detail/s3k5rfg0


3.动画

  • animation-name[动画名称]
  • animation-duration[动画时间]
  • animation-timing-function[播放方式]
  • animation-delay[开始播放时间]
  • animation-iteration-count[播放次数]
  • animation-direction[播放方向]
  • animation-fill-mode[播放后的状态]
  • animation-play-state[对象动画的状态]


说明

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 如果提供多个属性值，以逗号进行分隔。

如何开始进行动画

@keyframes相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name，那么就可以执行动画了。定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：如：

@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}

复杂动画：

@-webkit-keyframes demo{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

这里面的百分百有点像flash里帧的概念。表示设置某个时间段内任意时间点的样式。    

实例代码

CSS
  1. .animation_name{
  2.     left:0;
  3.     top:100px;
  4.     position:absolute;
  5.     -webkit-animation:0.5s 0.5s ease infinite alternate;
  6.     -webkit-animation-name:demo;
  7.     -moz-animation:0.5s 0.5s ease infinite alternate;
  8.     -moz-animation-name:demo;
  9. }
  10. @-webkit-keyframes demo{
  11.     0%{left:0;}
  12.     100%{left:400px;}
  13. }
HTML
  1. <div class="demo_box animation_name">看我没事来回跑</div>                    

预览下效果：http://runjs.cn/code/uajpxech

关联属性

  • transform-origin[变形原点]
  • perspective-origin[透视原点]
  • backface-visibility[隐藏内容的背面]
  • transform-style[3D呈现]

说明

transform的参照点默认为元素的中心点，如果要改变这个参照点，可以是用transform-origin属性进行自定义。

受影响变形函数：rotate()。


  1. .origin_1{
  2.     -webkit-transform-origin:center center;
  3.     -moz-transform-origin:center center;
  4.     -webkit-transition:0.5s ease all;
  5.     -moz-transition:0.5s ease all;
  6.     position:absolute;
  7.     left:10px;
  8.     top:50px;
  9. }
  10. .origin_2{
  11.     -webkit-transform-origin:left top;
  12.     -moz-transform-origin:left top;
  13.     -webkit-transition:0.5s ease all;
  14.     -moz-transition:0.5s ease all;
  15.     position:absolute;
  16.     left:250px;
  17.     top:50px;
  18. }
  19. .origin_3{
  20.     -webkit-transform-origin:100% 100%;
  21.     -moz-transform-origin:100% 100%;
  22.     -webkit-transition:0.5s ease all;
  23.     -moz-transition:0.5s ease all;
  24.     position:absolute;
  25.     left:480px;
  26.     top:50px;
  27. }
  28. .origin_4{
  29.     -webkit-transform-origin:20px 60px;
  30.     -moz-transform-origin:20px 60px;
  31.     -webkit-transition:0.5s ease all;
  32.     -moz-transition:0.5s ease all;
  33.     position:absolute;
  34.     left:250px;
  35.     top:160px;
  36. }
  37. .origin_1:hover,
  38. .origin_2:hover,
  39. .origin_3:hover,
  40. .origin_4:hover{
  41.     -webkit-transform:rotate(45deg);
  42.     -moz-transform:rotate(45deg);
  43. }                        
HTML
  1. <div class="demo_box origin_1">在中心点旋转45度</div>
  2. <div class="demo_box origin_2">在左上角旋转45度</div>
  3. <div class="demo_box origin_3">用百分百值来来设置旋转点旋转45度</div>
  4. <div class="demo_box origin_4">用长度值来设置旋转点旋转45度</div>                        
预览效果：http://runjs.cn/detail/alucwsnd




null


CSS3动画


联系
我们