最终效果图

案例步骤 1、下载fullPage 2、利用fullPage搭建八屏滚动效果 3、抽取公共样式（直接进入购物中心，继续往下） 4、给第一屏元素（购物列表、沙发、火箭）进行布局 5、给公共样式元素、第一屏元素添加动画 6、给第二屏元素（商品列表、沙发、搜索框、文字标题）进行布局 7、fullPage的afterLoad事件，给第二屏元素添加动画（难点） 8、给第三屏元素（沙发、选择尺码、购物车）进行布局 9、给第二屏的元素“沙发”添加离开动画 10、给第三屏元素（选择尺码、购物车）添加动画 11、给第四屏元素（白云、文字、购物车、沙发、邮寄地址）进行布局 12、给第四屏元素（白云、文字、购物车、沙发、邮寄地址）添加动画（难点） 13、给第五屏元素（文字、沙发、银行卡及账单、鼠标及小手）进行布局 14、给第五屏元素（沙发、银行卡及账单、鼠标及小手）添加动画 15、给第六屏元素（白云、文字、盒子、汽车-商家-收货地址-送货员-说的话、收货人-打开的门） 16、给第六屏元素添加动画（难点） 17、给第七屏元素（五星评价、好评文字）布局 18、给第七屏元素添加动画 19、给第八屏元素布局 20、给第八屏元素js特效以及清除前面所有动画效果回到第一屏

知识点： 1、animation 属性是一个简写属性，用于设置六个动画属性：

2、transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

3、transition 属性是一个简写属性，用于设置四个过渡属性：

4、动画

• 什么是帧动画：使用定时器 每隔一段时间 更改当前元素的状态

• 什么是补间动画：过渡(加过渡只要状态发生改变产出动画) 动画（多个节点来控制动画） 性能会更好

5、animation动画案例

<!-- 定义动画序列 -->
@keyframes more{
    from{
        transform: translateY(30px);
    }
    to{
        transform: translateY(-30px);
    }
}
​
<!-- 调用动画序列 每0.6s调用more动画，动画的速率为匀速，无限反向循环-->
animation: more 0.6s linear infinite alternate;
​
第三方常见动画序列效果网址
https://animate.style/

6、元素缩放案例

/* 商品列表缩放成原点位于右下角 */
    transform-origin: right bottom;
    transform: scale(0);

7、元素隐藏案例

将对应的物品隐藏掉，但是位置依然占着，css3动画使用
opacity: 0;
将对应的物品隐藏掉，但是位置没有占着，jquery动画使用
display: none;

8、transform旋转及位移案例

/* 关于transform旋转以及位移之间的关系 */
.screen03.leaved .sofa{
    /*1.组合写法  多个转换属性之间空格  transform:rotate() translateX() skew() scale()*/
    /*2.如果你先旋转  那么坐标轴也会旋转*/
    /*3. 最好是先位移在旋转*/
    animation: sofa03 1s linear;
}
@keyframes sofa03 {
    from{}
    to{
        transform: translate(190px,666px) rotate(45deg);
    }
}
​
转换之后会提高层级：transform
.fixed{
    width: 100%;
    height: 50px;
    background: pink;
    position: fixed;
    left: 0;
    top: 0;
}
.transform{
    transform: translateX(1px);
}
<div class="fixed"></div>
<div class="transform">
    123
</div>

9、过渡动画transition案例

/* 所有属性进行过度 */
transition: all 1s linear;
​
/*1.掐时间  做延时  完成动画的衔接*/
/*2.jquery的动画  $('dom').animate(property,duration,speed,callback) */
/*speed  (swing linear) */
/*3.能不能监听到动画或者过度的结束*/
/*4.css3当中 过渡 transitionend  动画 animationend*/
 /*当第四屏的购物车动画结束之后执行收货地址的动画*/
$('.screen04 .cart').on('transitionend',function () {
    /* :last :first :visible :hidden :checked :selected jquery扩展选择器*/
    $('.screen04 .address').show().find('img:last').fadeIn(1000);
    $('.screen04 .text').addClass('show');
});

10、背景图百分比

.box {
        width: 1000px;
        height: 500px;
        border: 1px solid #ccc;
        background: url("../cart/images/06-bg.png") no-repeat 100% bottom / 800px 300px;
        /*1.背景图的百分比不是按照容器的大小去换算的  注意：：：*/
        /*2.百分比的背景定位：基于  容器的宽度-背景的宽度    说白了就是剩余空间的百分比  */
        /*3.计算公式  背景的x的定位 = （容器的宽度-背景的宽度 ）* 百分比*/
    }

11、不同的过渡动画效果

.screen06.now .person .personImg{
    transform: none;
    right: 150px;
    /*注意一点：不同的属性状态改变*/
    transition: transform 0.5s linear 5s,right 0.5s linear 5.5s;
}

总结：

1、需要动画效果，循环执行有一定规律,多组动画，使用animation属性

2、需要渐变动画，一次性的，一组动画，使用过度动画transition属性

3、需要2D 或 3D 转换。transform属性允许我们对元素进行旋转、缩放、移动或倾斜。

4、常见动画效果网址 https://animate.style/

5、元素隐藏（opacity、display）的使用场景

6、transform旋转坐标轴改变问题

7、transform完成元素缩放、位移动画问题解决方案

8、transform提升层级问题

9、过渡动画transition，动画结束后监听（transitionend）回调处理其他动画的解决方案

10、背景图百分比位置计算问题

11、transform先订好位移的最终位置，然后去除transform，最终完成需要的动画效果

12、多组过渡动画的写法

点击下载代码包

cart.zip 

over.....