码迷,mamicode.com
首页 > 其他好文 > 详细

transition和animation概况

时间:2018-01-27 17:00:51      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:属性   转化   选择器   gre   执行   应用   func   关键帧动画   特定   

  有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(transform)和过渡(transition)扯上关系了,其实并非如此,转化(transform)属性让动画的变换多元化,而过渡(transition)属性是动画中的一种表现形式,也可以说成是动画一个版本。

  css3在原来的基础上增加了变形和动画相关的属性,动画三兄弟:transform、transition和animation,通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性,各大浏览器支持方面还不是特别好,使用时要特别注意浏览器的兼容性。

一、Transform(转换)

定义和用法:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

浏览器支持情况:

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

技术分享图片

二、transition(过渡)

  W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

  transition的四个属性:

  • transition-property: 指定对HTML元素的哪个css属性进行过渡渐变处理,这个属性可以是color、width、height等各种标准的css属性。
  • transition-duration:指定属性过渡的持续时间
  • transition-timing-function:指定渐变的速度: 
    1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0); 
    2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0); 
    3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0); 
    4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0); 
    5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0); 
    6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。
  • transition-delay:指定延迟时间,也就是经过多长时间才开始执行过渡过程。

  浏览器兼容性:

  Internet Explorer 9 以及更早的版本,不支持 transition 属性。

  Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 属性。Chrome 25 以及更早的版本以及Safari 需要前缀 -webkit-。

  下面用实例来说明transition的用法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition演示1</title>
    <style type="text/css">
        .animated_div {
            margin: 100px auto;
            width:100px;
            height:60px;
            font-size: 12px;
            background:#92B901;
            /*简写属性*/
            -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */
            /*每个属性分开写*/
            transition-property:width,height,transform,background,opacity;
            transition-duration:1s,1s,1s,1s,1s,1s;
            -webkit-border-radius:5px;
            border-radius:5px;
            opacity:0.4;
        }
        .animated_div:hover {
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
            opacity:1;
            font-size: 20px;
            background:#1ec7e6;
            width:200px;
            height:120px;
        }
    </style>
</head>
<body>
<div class="animated_div">测试</div>
</body>
</html>

三、Animation(关键帧动画)

  要使用animation动画,先要熟悉一下keyframes,Keyframes的语法规则:命名是由”@keyframes”开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则。不同关键帧是通过from(相当于0%)、to(相当于100%)或百分比来表示(为了得到最佳的浏览器支持,建议使用百分比),如下定义一个简单的动画:

@keyframes myfirst /*定义动画名*/
    {
    0%   {background:red; left:0px; top:0px;} /*定义起始帧样式,0%可以换成from*/
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;} /*定义结束帧样式,100%可以换成to*/
    }

  @keyframes定义好了,要使其能发挥效果,必须通过animation把它绑定到一个选择器,否则动画不会有任何效果。下面列出了animation的属性:

技术分享图片

  补充一个属性: animation-fill-mode : forwards;  停在最后一帧动画。

  下面设置上述的所有属性:

animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

  简写:

animation:myfirst 5s linear 2s infinite alternate;
animation-play-state:running;

  浏览器兼容性:

  Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

  Chrome 和 Safari 需要前缀 -webkit-。

  注意:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

transition和animation概况

标签:属性   转化   选择器   gre   执行   应用   func   关键帧动画   特定   

原文地址:https://www.cnblogs.com/xiaoli52qd/p/8365966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!