当前位置: 首页 > 最新文章 > 正文

transformtranslatecss3动画animation属性大全(css动画animation和transition)

animation(动画)语法:`animation: name duration timing-function delay iteration-count direction;`1. name2. duration3. function4. delay5. count6. directionCSS3最容易混淆属性transition(过渡)语法:`transition: property du

admin

animation(动画)语法:`animation: name duration timing-function delay iteration-count direction;`1. name2. duration3. function4. delay5. count6. directionCSS3最容易混淆属性transition(过渡)语法:`transition: property duration timing-function delay;`1. property2. duration3. function4. delayCSS3最容易混淆属性transform(变形)语法:`transform: none|transform-functions;`functions提供多种方法,如:skewX沿着 X 轴的 2D 倾斜转换,translate3d3D 转换,rotate2D 旋转,在参数中规定角度等等CSS3最容易混淆属性是不是发现羡慕已久的导航就是这样搞定的!translate(移动)`translate`其实是 `transform`的一种方法,进去2D或者3D移动1. translate(x,y) 2D平移,x/y分别是x坐标平移多少像素,y坐标平移多少像素2. translate3d 3D平移,和2D一样

点击右上方红色按钮关注“web秀”,让你真正秀起来!

前言

css属性很多,无论是字母的拼写还是字面上的意思,很多人都容易混淆,包括我在内,也时不时需要去看看到底是咋回事,是不是也混淆过你~

下面列举几个最容易混淆的属性:

1. animation(动画) 用于设置动画属性,他是一个简写的属性,包含6个属性;

2. transition(过渡)用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同;

3. transform(变形) 用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”;

4. translate(移动) translate只是transform的一个属性值,即移动。

下面详细介绍。

animation(动画)

语法:`animation: name duration timing-function delay iteration-count direction;`

1. name(需要绑定到选择器的 keyframe 名称)

2. duration(完成动画所花费的时间,以秒或毫秒计)

3. function(动画的速度曲线)

4. delay(动画开始之前的延迟)

5. count(动画应该播放的次数)

6. direction(是否应该轮流反向播放动画)

CSS3最容易混淆属性transition transform animation translate

CSS3最容易混淆属性

transition(过渡)

语法:`transition: property duration timing-function delay;`

1. property(设置过渡效果的 CSS 属性的名称)

2. duration(完成过渡效果需要多少秒或毫秒)

3. function(速度效果的速度曲线)

4. delay(过渡效果何时开始)

CSS3最容易混淆属性transition transform animation translate

CSS3最容易混淆属性

transform(变形)

语法:`transform: none|transform-functions;`

functions提供多种方法,如:skewX(angle)沿着 X 轴的 2D 倾斜转换,translate3d(x,y,z)3D 转换,rotate(angle)2D 旋转,在参数中规定角度等等

CSS3最容易混淆属性transition transform animation translate

CSS3最容易混淆属性

是不是发现羡慕已久的导航就是这样搞定的!

translate(移动)

`translate`其实是 `transform`的一种方法,进去2D或者3D移动

1. translate(x,y) 2D平移,x/y分别是x坐标平移多少像素,y坐标平移多少像素

2. translate3d(x,y,z) 3D平移,和2D一样


上一篇: 深入剖析在意大利肆掠的Danabot木马新变种 下一篇:变速器的挡位(变速器的操作)
返回顶部