CSS动画 transition transform animate

animate良心文章很全 缺少点源码:

https://blog.csdn.net/u013243347/article/details/79976352?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161521195316780264075666%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=161521195316780264075666&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-4-79976352.pc_search_result_cache&utm_term=CSS动画

Animation 组成

CSS3 Animation 是由三部分组成。

1.关键帧(@keyframes)

*关键帧(keyframes) - 定义动画在不同阶段的状态。
*动画属性(properties) - 决定动画的播放时长,播放次数,以及用何种函数式去播放动画等。(可以类比音视频播放器)
*css属性 - 就是css元素不同关键帧下的状态。

下面我们来看一个例子。
创建了一个@keyframes命名为dropdown。
*关键帧主要分为3个阶段,0%、50%、100%。
*动画播放时长为6s、循环播放(infinite)、以linear方式进行播放。
*修改的元素属性为margin-top

.list div:first-child {
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
    0% { margin-top: 0px;}
   /** 暂停效果 */
   10% { margin-top: 0px;}
   50% { margin-top: -100px;}
   60% { margin-top: -100px;}
   90% { margin-top: -200px;}
  100% { margin-top: -200px;}
}
————————————————
版权声明:本文为CSDN博主「Robbie丨Yang」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u013243347/article/details/79976352

transform组成

transform属性 可以使元素进行缩放、平移、旋转等2D、3D的变换

语法:

transform: none/transform-function;

参数:

translate(x,y) 定义2D转换,表示在x轴和y轴上进行平移

translate3d(x,y,z) 定义3D转换

translateX(x) 表示在x轴上进行平移

translateY(y) 表示在y轴上进行平移

translateZ(z) 表示在z轴上进行平移

rotate(deg) 表示旋转一定角度,正时针旋转角度为正直,逆时针旋转角度为负值

rotate3d(x,y,z,deg) 3D转换

rotateX(angle) 3D转换,表示绕x轴旋转多少度

rotateY(angle) 3D转换,表示绕y轴旋转多少度

rotateZ(abgle) 3D转换,表示绕Z轴旋转多少度

scale(x-angle,y-angle) 2D转换,表示缩放,在x轴和y轴上扩大多少倍。x值和y值 表示倍数,若值小于1 表示缩小

scaleX(angle) 表示在x轴上扩大多少倍

scaleY(angle) 表示在y轴上扩大多少倍

skew(x-angle,y-angle) 表示在x轴和y轴上分别倾斜的度数

skewX(x) 2D转换,表示在x轴上倾斜的度数

skewY(y) 2D转换,表示在y轴上倾斜的度数

matrix(n,n,n,n,n,n) 定义2D转换,表示使用6个值得矩阵进行变换

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,) 定义3D转换,表示使用16个值的4x4转换

none 表示不进行转换

接下来有个transform-origin:

用来设置被改变元素的中心位置,经常用于旋转中,要设置旋转中心。其值是具体的度数数值,值可以为正值或负值,为正值表示正向旋转,为负值表示逆向旋转。2D和3D都可使用

语法:

transform-origin:x y z;

x 定义视图被置于x轴何处,

         可能的值:left/center/right/length/%

y 定义视图被置于Y轴的何处

          可能的值:top/center/bottom/length/%

z 定义视图被置于z轴何处

           可能的值: length

————————————————
版权声明:本文为CSDN博主「晒太阳的鱼il」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_29704567/article/details/89192944

兼容性问题
-webit-animation

-moz-animation

-o-animation

animation

同时调用以上元素,则可以兼顾主流浏览器。

transition组成

ransition的属性及值
transition-property:指定应用过度属性的名称 默认值为all 表示所有可被动画的属性都表现出过度动画 可指定多个property; none:没有过度动画;all:所有可被动画的属性都表现出过度动画; IDENT:属性名称(可以指定多个)

transition-duration:属性以秒或毫秒为单位指定过度动画所需的时间。 默认值为0s,表示不出现过渡动画。可以指定多个时长,每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数,那么时长列表会重复。 如果时长列表更长,那么该列表会被裁剪。两种情况下,属性列表都保持不变。 属性值:以秒或者毫秒为单位 不接受负值,必须带单位。

transition-timing-function:css属性受到transition的影响,会产生不断变化的中间值,而css transition-timing-function属性用来描述 这个中间是怎样计算的。实质上,通过这个函数会建立一条加速度曲线,因此在整个transition变化过程中,变化速度可以不断改变。

默认值:ease

你可以规定多个timing function,通过使用transition-property属性,可以根据主列表(transition-property的列表)给每个css属性应用相应的timing function ;如果timing fucntion 的个数比主列表中数量少,缺少的值被设置为初始值(ease)。如果timing function 比主列表要多,timign functioin函数列表会被截断至合适的大小。这两种情况下声明的css属性都是有效的。

属性值:

1.ease:(加速然后减速)默认值,ease函数等同于贝塞尔曲线(0.25,0.1,0.25,1.0)。

2.linear:(匀速),linear函数等同于贝塞尔曲线(0.0,0.0,1。0,1.0)

3.ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42,0,1.0,1.0)

4.ease-out:(减速),ease-out函数等同于贝塞尔曲线(0,0,0.58,1.0)

5.ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42,0,0.58,1.0)

6.cubic-bezier:贝塞尔曲线

7.step-start:等同于stteps(1,start)

​ step-end:等同于steps(1,end)

​ step(,[,[start|end]]?)

​ 第一个参数:必须为正整数,指定函数的步数

​ 第二个参数:指定每一步的值发生变化的时间点(默认值end)*/
————————————————
版权声明:本文为CSDN博主「阳光之末亚」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_40947563/article/details/92771687

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值