web动画的基本实现

1.过渡动画(transition)

               ①简写:transition:过渡参数  过渡时间   速度曲线  延迟时间,(多个过渡的属性变化使用逗号隔开),如果多个属性动画是一样的可以简写:transition:all 2s linear 1s

               ②分开写:transition-property:过渡属性   transition-duration:过渡持续时间 transition-timing-funcition:过渡曲线(linear匀速  ease:减速  ease-in加速  ease-out减速 ease-in-out先加速后减速) transition-delay:过渡延时

2.位移动画(transfrom)

              transfrom:scale(x轴缩放,y轴缩放) 缩放动画   translate:(x轴平移,y轴平移)平移动画  rotate(旋转角度)旋转动画

3.animation动画

              animation: 动画名称 持续时间(normal动画按正常播放。 reverse动画反向播放    alternate动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。   alternate-reverse动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。     initial设置该属性为它的默认值。     inherit从父元素继承该属性。) 执行次数(n指定一个数字表示多少次     infinite指定动画应该播放无限次(永远)) 是否反向 运动曲线(linear动画从头到尾的速度是相同的    ease默认。动画以低速开始,然后加快,在结束前变慢。 ease-in动画以低速开始。ease-out动画以低速结束  ease-in-out动画以低速开始和结束) 延迟执行

               例:

animation: move (动画名称)1s(时间 ) alter(次数)nate(反向 ) linear(运动曲线) 3 (延迟执行);

@keyframes move {

from{

       transform: translateX(0px) rotate(0deg) ;

}

to{

   transform: translateX(500px) rotate(555deg) ;

}

}

4.3d转换动画

例:

旋转动画

.rote{

transition: transform 2s;

}

.rote:hover{

//transform: rotateX(360deg);

//transform: rotateY(360deg);

transform: rotateZ(360deg);

}

平移动画

.box{

transition:all 1s;

}

.box:hover{

//transform:translateX(300px);

//transform:translateY(300px);

transform:translateZ(300px);

}

5.skew(xdeg,ydeg);用于斜拉变换。

第一个参数x的转换角度,第二个是y的转换角度

      

          

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值