CSS3动画总结

更新日期: 2019-05-29阅读: 2.6k标签: css3动画

常用特效/变换(transform)

  •  scale(2D缩放)
  •  rotate(2D旋转)
  •  translate(2D位移)
  •  skew(2D倾斜)

 

keyframes

这个属性用来定义一系列关键帧。也就是在动画运行的全过程中的一个个中间点。

@keyframes zoomIn {
    0%{ transform: scale(0);}
    60%{ transform: scale(1.1);}
    100% { transform: scale(1);}
}
@-moz-keyframes zoomIn {
    0%{ transform: scale(0);}
    60% { transform: scale(1.1);}
    100% { transform: scale(1);}
}
@-webkit-keyframes zoomIn {
    0%{ -webkit-transform: scale(0);}
    60% { -webkit-transform: scale(1.1);}
    100% { -webkit-transform: scale(1);}
}
@-o-keyframes zoomIn {
    0%{ -o-transform: scale(0);}
    90% { -o-transform: scale(1.1);}
    100% { -o-transform: scale(1);}
}
@-ms-keyframes zoomIn{
    0%{ -ms-transform: scale(0);}
    60% { -ms-transform: scale(1.1);}
    100% { -ms-transform: scale(1);}
}


animation的属性 

语法



nimation-fill-mode 填充模式

 该属性有四个值 

none:默认值。不设置对象动画之外的状态 
forwards:设置对象状态为动画结束时的状态(触发之前) 
backwards:设置对象状态为动画开始时的状态(触发之后) 
both:设置对象状态为动画结束或开始的状态() 

注意 这个东西只能在animation之后添加


事件

在动画的世界里,总有这样的需求,就是某个动画结束了之后才进行下一个动画,这个时候就要知道上一个动画是什么时候结束的了。虽然可以用setTimeout来计时达到差不多的效果,但是总感觉不够精确。 还好,css3的动画有js事件。 

开始:animationstart 
迭代:animationiteration 
结束:animationend
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">
    @-webkit-keyframes delay{
        
        100%{
            -webkit-transform:translate(100px,0);
        }
       
    }
    .delay{

        width:100px;height:100px;
        background-color: #000;
        -webkit-animation:delay 1s linear 2 both alternate;
    }
</style>
</head>
<body>
    <div class="delay"></div>
    <script type="text/javascript">
    window.onload = function(){
        var delay = document.getElementsByClassName('delay')[0],
        time1,
        time2;
        delay.addEventListener('webkitAnimationStart',function(){
            time1 = new Date().getTime();
            time2 = time1;
            console.log(time2-time1+'ms')
            
        })
        delay.addEventListener('webkitAnimationIteration',function(){
            time2 = new Date().getTime();
            console.log(time2-time1+'ms')
        })
        delay.addEventListener('webkitAnimationEnd',function(){
            time2 = new Date().getTime();
            console.log(time2-time1+'ms')
        })
    }
    </script>
</body>
</html>




链接: https://www.fly63.com/article/detial/3932

如何写出高性能的CSS3动画

小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU加速就能让动画顺滑呢?

css3动画讲解,关于css3的@keyframes和animation

通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。

css3动画transition的使用和介绍

CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。

CSS3动画 相比JS Animation 哪个更快?

基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点?这篇文章将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的动画库高效的。

css制作简单loading动画效果【css3 loading加载动画】

loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就完了。gif图也可以,但是加载时间比较长。CSS的animation可以做出大多数的loading

不定高度的元素实现transition动画_如何为height:auto的div添加css3过渡动画

一个元素不设置高度时,height的默认值是 auto,浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 CSS3动画呢?可以通过JS 获取精确的 height 值,或者使用max-height 代替 height。

css3动画的性能优化_针对移动端卡顿问题

主要讲的是怎样制作流畅动画,特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点;接着会着重介绍用css3制作动画的注意事项,包括:用canvas、css3、jquery制作动画;css3在移动端卡顿问题;动画过程有闪烁问题(一般出现在动画开始)

CSS3动画transform、transition和animation的区别

CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation。transform:描述了元素的静态样式,本身不会呈现动画效果,transition样式过渡,从一种效果逐渐改变为另一种效果,animation动画 由@keyframes来描述每一帧的样式

css3动画,监控动画执行完毕

CSS3之前,在网页上要做动画,一般使用javascript来实现,用timer定时执行一些操作来实现动画效果。自有了CSS3之后,在网页上做动画变得更简单了。相对于使用javascript的实现方式,用CSS3实现的动画效果更流畅,实现起来也更简单。

值得你收藏的10个CSS3动画工具

在CSS3中引入了全新的动画语法,它能够帮助你在设计中实现许多有趣的事情。通常构建炫酷的动画是非常复杂和费时的,而使用动画库和生成器则可以帮助你完美处理这一切

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!