CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。

1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

div{transform:scale(2);
}

transition和animation两者都能实现动画效果

transform常常配合transition和animation使用

2、transition样式过渡，从一种效果逐渐改变为另一种效果

transition是一个合写属性

transition:transition-property transition-duration transition-timing-function transition-delay

从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间

div{width：100px;height:100px;transition:transform 2s;
}
div：hover{transform:rotate(180deg);
}

transition通常和hover等事件配合使用，需要由事件来触发过渡

3、animation动画由@keyframes来描述每一帧的样式

div{animation:myAnimation 5s infinite
}
@keyframes myAnimation {0%{left:0;transform:rotate(0);}100%{left:200px;transform:rotate(180deg);}
}

区别：

（1）transform仅描述元素的静态样式，常常配合transition和animation使用

（2）transition通常和hover等事件配合使用，animation是自发的，立即播放

（3）animation可设置循环次数

（4）animation可设置每一帧的样式和时间，transition只能设置头尾

（5）transition可与js配合使用，js设定要变化的样式，transition负责动画效果，如：

/*css:*/
div{ width:100px;height:100px;transition:all 1s;
}
//js
divEle.onclick = function(){divEle.style.width = "200px";divEle.style.height = "200px";
}

转载于:https://www.cnblogs.com/lihuijuan/p/10126837.html

CSS动画transform、transition和animation的区别相关推荐

css动画效果 transform transition @keyframes animation 涉及jquery
1.transform: translateY(100px); 但是transform在单独使用的时候并不会产生动画效果, 页面加载的时候就已经在变化后的状态了,所以需要搭配transition使用, ...
css hover变成手_web前端入门到实战：彻底掌握css动画「transition」
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了 ...
css动画（transition，translate，rotate，scale）
序言为什么会用css动画呢通过CSS3过渡,我们可以在不使用 Flash 动画或 JavaScript 的情况下, 使元素从一种样式变换为另一种样式时为元素添加效果. css动画可以做很多特效,特 ...
CSS动画：transition画一个爱心
CSS中最简单的动画叫做 transition(转变).通常,当一个元素的样式属性值发生变化时,我们会立即看到页面元素发生变化,也就是页面元素从旧的属性值立即变成新的属性值的效果.Transition ...
CSS动画：transition触发动画和animation非触发动画
前言本篇在讲什么本章学习通过CSS样式表现动画本篇适合什么适合初学H5的小白适合初学CSS的小白适合入门的前端程序本篇需要什么对Html和css语法有简单认知 Node.js(博主v1 ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
html css动画自动旋转,基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 实现的代码. html代码: $('.mod_info2__power3').o ...
01.CSS动画--transform
transform: translate(参数1,参数2):让元素在X轴与Y轴方向发生偏移-->参数1:X:参数2:Y rotate(参数1):让元素进行旋转:单位(deg) scale(参数1 ...
css动画 transform 的旋转应用示例
属性: rolateX rolateY rolateZ 三个方向的旋转方向及角度 rolateX rolateZ 从正斜上方查看可以理解为顺时针旋转: rolateY 从正斜上方查看可以理 ...
css 跳跃动画,CSS动画实例：跳跃的字符
1．翻转的字符在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: H E L L O 为container和span定义CSS样式规则,并定义实现 ...

CSS动画transform、transition和animation的区别

CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。

1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

2、transition样式过渡，从一种效果逐渐改变为另一种效果

3、animation动画由@keyframes来描述每一帧的样式

区别：

CSS动画transform、transition和animation的区别相关推荐

最新文章

热门文章

CSS动画transform、transition和animation的区别

CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。

1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

2、transition样式过渡，从一种效果逐渐改变为另一种效果

3、animation动画 由@keyframes来描述每一帧的样式

区别：

CSS动画transform、transition和animation的区别相关推荐

最新文章

热门文章

1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

3、animation动画由@keyframes来描述每一帧的样式