为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3中transition、transform傻傻分不清楚

标签:
Html5 CSS3

前言

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

属性 含义
animation(动画) 用于设置动画属性,他是一个简写的属性,包含6个属性
transition(过渡) 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同
transform(变形) 用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”
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(是否应该轮流反向播放动画)
div {
  width: 100px;
  height: 100px;
  background: #1199ff;
  position: relative;
  animation: mymove 5s infinite;
  -webkit-animation: mymove 5s infinite;
}
@keyframes mymove {
  from {
      left: 0px;
  }
  to {
      left: 200px;
  }
}
@-webkit-keyframes mymove {
  from {
      left: 0px;
  }
  to {
      left: 200px;
  }
}

CSS3中transition、transform傻傻分不清楚

transition(过渡)

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

  1. property(设置过渡效果的 CSS 属性的名称)
  2. duration(完成过渡效果需要多少秒或毫秒)
  3. function(速度效果的速度曲线)
  4. delay(过渡效果何时开始)
div {
  width: 100px;
  height: 100px;
  background: #ee1166;
  transition: width 2s;
  -moz-transition: width 2s;
  /* Firefox 4 */
  -webkit-transition: width 2s;
  /* Safari and Chrome */
  -o-transition: width 2s;
  /* Opera */
}
div:hover {
  width: 300px;
}

CSS3中transition、transform傻傻分不清楚

transform(变形)

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

/**css*/
ul {
  margin: 20px 0 0 20px;
  padding: 0;
  list-style: none;
}
li {
  float: left;
  width: 100px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-right: 4px;
  background: #ee1166;
  -webkit-transform: skewX(30deg);
}
a {
  text-decoration: none;
  -webkit-transform: skewX(-30deg);
  display: block;
  color: #fff;
}
li:hover{
  background: #008cf4;
}
/**html*/
<ul>
    <li><a href="#">Javan的博客</a></li>
    <li><a href="#">今日头条</a></li>
    <li><a href="#">慕课网</a></li>
    <li><a href="#">开源中国</a></li>
</ul>

CSS3中transition、transform傻傻分不清楚

translate(移动)

translate其实是 transform的一种属性值,进去2D或者3D移动

  1. translate(x,y) 2D平移,x/y分别是x坐标平移多少像素,y坐标平移多少像素
  2. translate3d(x,y,z) 3D平移,和2D一样

公告

以后每月5、15、25号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

点击查看更多内容
8人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.5万
获赞与收藏
5278

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消