专栏首页web秀CSS3中transition、transform傻傻分不清楚

CSS3中transition、transform傻傻分不清楚

前言

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;
  }
}

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;
}

transform(变形)

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

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;
}
<ul>
    <li><a href="#">Javan的博客</a></li>
    <li><a href="#">今日头条</a></li>
    <li><a href="#">慕课网</a></li>
    <li><a href="#">开源中国</a></li>
</ul>

translate(移动)

translate其实是 transform的一种属性值,进去2D或者3D移动 1. translate(x,y) 2D平移,x/y分别是x坐标平移多少像素,y坐标平移多少像素 2. translate3d(x,y,z) 3D平移,和2D一样

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 0行JS,30行css搞定导航栏下划线跟随效果

    在码代码之前了,我们可以尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果?

    Javanx
  • 如何快速上手基础的CSS3动画

    说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元素的动作,...

    Javanx
  • JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    你肯定知道,动画在创建引人注目的 Web 应用程序中扮演着重要的角色。随着用户越来越多地将注意力转移到用户体验上,商户开始意识到完美、愉快的用户体验的重要性,结...

    Javanx
  • CSS 制作雪碧图列表

    在日常开发列表中会有很多的小图片,例如上图列表中的1-5小图标。如果每个小图片都分为一个小图片进行请求。这样就需要请求5次服务器。

    Devops海洋的渔夫
  • 如何使用css3实现一个类在线直播的队列动画

    之前在群里有个朋友问了这样一个问题, 就是如何在小程序中实现类似直播平台的用户上线时的队列动画? 作为一名前端工程师, 解决方案无非以下2种:

    徐小夕
  • 第58天:简单焦点轮播图

    半指温柔乐
  • 如何在React中优雅的处理doubleClick

    上午楼主遇到一个需要处理双击事件的需求,在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法, 顺便分享给大家。

    用户6900878
  • DSSM:深度语义匹配模型(及其变体CLSM、LSTM-DSSM)

    郭耀华
  • 超强教程!在树莓派上构建多节点K8S集群!

    在很长一段时间里,我对于在树莓派上搭建Kubernetes集群极为感兴趣。在网络上找到一些教程并且跟着实操,我已经能够将Kubernetes安装在树莓派上,并在...

    k3s中文社区
  • 【Vue.js】Vue.js组件库Element中的树形控件、分页、标记、头像和警告

    Tree 内部使用了 Node 类型的对象来包装用户传入的数据,用来保存目前节点的状态。 Tree 拥有如下方法:

    魏晓蕾

扫码关注云+社区

领取腾讯云代金券