css3动画属性详解之transform、transition、animation

Riddler 发布于2019-08-30 12:46 / 2070人阅读

摘要：动画属性详解关于制作动画的几个属性变形转换和动画。一属性旋转中心为原点扭曲倾斜缩放移动矩阵变形。各个属性的用法旋转其中表示度。承载动画的另一个属性。定义动画的名称。一个或多个合法的样式属性。

css3动画属性详解：

关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)。

一、transform 属性：

旋转rotate（中心为原点）
扭曲、倾斜skew（skew(x,y), skewX(x), skewY(y)）
缩放scale（scale(x,y), scaleX(x), scaleY(y)）
移动translate（translateX,translateY）
矩阵变形matrix。

各个属性的用法：

transform:rotate()：旋转；其中“10deg”表示“10度”。

    transform: rotate(10deg);

transform:skew()：倾斜；

transform: skew(20deg);

transform:scale()：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

transform: scale(1.5);

transform:translate()：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

transform: translate(120px,0);

综合在一起：(效果是动态)

.demo{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

二、transition

css的transition允许css的属性值在一定的时间区间内平滑地过渡。

四个属性：

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。

transition-duration是用来指定元素,转换过程的持续时间

transition-timing-function:

transition-delay[延迟] ：是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果

综上所述，相对应的一个示例代码：

  a {
    transition: background 0.5s ease-in,color 0.3s ease-out;
    transition：transform .4s ease-in-out;
  }

缩略图实例（原文：Anselm Urban）：http://codepen.io/SitePoint/p...

三、animation（@keyframes规则）

CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法多带带担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

通过 @keyframes 规则，您能够创建动画。

@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

@keyframes 它定义的动画并不直接执行，需要借助animation来运转。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

百分比是指动画完成一遍的时间长度的的百分比 ，0% 是动画的开始时间，50%是动画完成一半的时间，100% 动画的结束时间。百分比后面的花括号写：在动画执行过程中的某时间点要完成的变化。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

语法

    @keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。定义动画的名称。合法的值： 1. 0-100% 2. from（与 0% 相同） 3. to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

例子1：

名字为gif的@keyframes ，动画完成需要的总时长为1.4s,刚开始的时候图片旋转为0度，动画完成的时候图片旋转360度

.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

例子2：

名字为mymove的@keyframes ，动画完成需要的总时长为1s,刚开始的时候图片距顶部距离为0px，0.25s后图片距顶部距离为200px，0.5s后图片距顶部的距离为100px，以此类推

.img {
    width: 120px;
    height: 120px;
    background: url(../images/icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: mymove 1s infinite linear;
}
@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

例子3：

在一个动画中改变多个 CSS 样式：

@keyframes mymove
{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}

GPU云服务器云服务器 css3动画高性能css3动画看动画学算法之:hashtable js原生动画详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115057.html

「CSS3 」动画详解

摘要：规定动画的名称。规定动画是否在下一周期逆向地播放。定义动画各个阶段的状态的代码段。动画的周期时间。动画的循环次数。动画完成后，元素保持动画最后的状态。重要提示请不要忘记推荐和收藏搜索动画详解 CSS3 提供给了我们非常多的转换函数： 2D: translate, rotate, scale, skew. 3D: translate3d, rotate3d, scale3d, skew...

weij 2019-08-28 18:16 评论0 收藏0
CSS3 新特性

摘要：语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影，向右偏移，向下偏移，模糊半径，阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 评论0 收藏0
css3中的变形（transform）、过渡（transition）、动画（animation）属性

摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。一、 CSS3变形（transform）语法： transform ： no...

waruqi 2019-08-30 10:51 评论0 收藏0
CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

leone 2019-08-29 15:10 评论0 收藏0
CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

LittleLiByte 2019-08-02 10:18 评论0 收藏0