使用 .animated 给元素添加动效
.animated.fadeInUp.animated 添加的动效是自动播放的
h2.animated.fadeIn.slow
.animated.fadeIn.delay-800
animate with
.tobuild
需要添加动效的元素添加 .tobuild + 动效class
.tobuild 动效是手动触发的
.build 子元素全部会被添加.tobuild
.build+.moveIn.build+.moveIn.build+.moveIn.build+.moveIn.build+.moveIn
animate.css + .build
- fadeIn
- swing
- flash
- pulse
- shake
- bounceIn
- wobble
- fadeInLeft
- flipInX
- tada
- slideInUp
- jello
- heartBeat
- fadeInUp
- lightSpeedIn
nodeppt 使用 Prismjs 做语法高亮
.fadeInUp+.slow- Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
- Highlights inline code as well, not just code blocks
- Highlights nested languages (CSS in HTML, JavaScript in HTML)
<article id="webslides">
<!-- Slide 1 -->
<section>
<h1>Design for trust</h1>
</section>
<!-- Slide 2 -->
<section class="bg-primary">
<div class="wrap">
<h2>.wrap = container (width: 90%)</h2>
</div>
</section>
</article>
Autoplay Feature
Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.
.background.anim
Design for understanding
100% purpose
Businesses that people love
Principles
Useful → Easy → Fast → Beautiful
Designing Experiences
自动播放的animate.css
View More Demos?
* * *