transform,transition 和 animation

简单分析transform,transition 和 animation

  1. transfrom transfrom
    可用于移动(translate)、旋转(rotate)、放缩(scale)、倾斜(skew)等。只有变换的结果,没有具体的过程。可用获取光标时css变化,或者操作class。
    代码如下:

    transform: translate(-50%, -50%);(特别注意 50%是相对于自身的宽高决定的。) 	
    transform: rotate(180deg); 	
     transform: scale(1.2); 	 
     transform:   skew(45deg, 45deg);
    
  2. transition transition 用于线性变化。通俗的讲可以把动画从0% 到
    100%的结果用相对平滑的效果展示,区别于transform直接展示结果。用法如下: transition:
    transition-property transition-duration transition-timing-function
    transition-delay。 例如:

    transition: all .3s ease-in-out 0s; all 代表所有涉及到变化的属性。

  3. animation animation 代表动画。相对于transition针对于起始点和终点的线性变化,animation 更看重过程,主要配合@keyframes使用。其中用

	@keyframes animation-name { 		
		   from { } 		
		   to { } 	
	  } 

可以很好地模拟transition。
用法如下:
animation: animation-name
animation-duration animation-timing-function animation-delay
animation-iteration-count animation-direction。
animation-iteration-count 代表动画应该播放的次数,
animation-direction代表是否应该轮流反向播放动画,具体代码如下:

 @keyframes
    fadeInRight {
        0% {
          opacity: 0;
          transform:scale(1.2) rotate(360deg);
        }
        100% {
          opacity: 1;
          transform:scale(1) rotate(0deg);
        }   
      } 
      animation: fadeInRight .3s ease-in-out 0s infinite;

最后要特别说明的是transform-origin ,这个属性可以用来修改旋转元素的基准点。默认是中间

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值