css3的transfrom,transition, animation

transition是过渡属性  用于设置四个过渡属性

  • transition-property     规定设置过渡效果的 CSS 属性的名称。
  • transition-duration       规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function     规定速度效果的速度曲线。
  • transition-delay       定义过渡效果何时开始。

 会有宽度变化过度效果,时间是2s

#test {
    width: 100px;
    height: 100px;
    background-color: cyan;
    transition: width 2s linear; 
}

#test:hover {
    width: 300px;
    height: 100px;
}

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

  •  旋转:transform:rotate(-45deg);
  • 缩放:transform:scale(.5); scaleX(2); scaleY(3)。如果给了负值,能够达到翻转的效果:scaleX(-1)
  • 移动:transform: translate(1px,2px)
  • 倾斜:transform:skew(45deg,0);

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name     规定需要绑定到选择器的 keyframe 名称
  • animation-duration    规定完成动画所花费的时间,以秒或毫秒计。
  • animation-timing-function   规定动画的速度曲线。
  • animation-delay      规定在动画开始之前的延迟。
  • animation-iteration-count   规定动画应该播放的次数。
  • animation-direction    规定是否应该轮流反向播放动画。

创建animation动画有两个步骤

1.定义动画:主要指定义关键帧 

@keyframes fadeIn{
   from{
      opacity:0;
  },
  to{
     opacity:1;   
 }
}

2.将动画应用到元素上

.nav-button{
   animation-name:fadeIn;
   animation-duration:1s;
   animation-timing-function:ease-out,
   animation-delay:.5s;
   animation-iteration-count:infinite;  
   animation-direction:alternate
}

区别transition 

  transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。

  transition必须使用触发器触发,animation可以使用触发器,也可以在页面加载完成的时候自动触发。

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值