前几天写了滚动全屏的问题，但是觉得这种滚动太一般了，没什么好玩的，还是不如现在的一些页面带动画的来的高大上。
我知道Html5和Css3的一些东西，那一定是css3动画实现的效果，然后我不假思索的给一些元素添加了属性
> translation：all 1s;
然而这并没有什么用，根本不会有动态的效果，动画需要动作来完成的。先说说css3动画的属性,大概是 transform（变形）、transition（转换）、animation（动画）三大属性。
想要有动画的效果，至少是有初始的形态和最终形态。比如你看到的效果中，进入当前页面，页面里的一张图片会从下往上移动到它应该在的位置，那么这个效果中，进入页面的时候它所在的位置是初始的形态，等到他移动完了之后的位置就是他的最终形态。必须要这两种形态才行，缺了任何一个都不会让动画动起来。
最后我参考了一些资料，写出了我的第一个移动的动画
>.net_inner .page3_1{background: url(img/page3_1.png); bottom: 35%; opacity: 0; margin-left: 40%; transition: all 0.8s;}
>.active .net_inner .page3_1{opacity: 1.0; transition-delay: 1s; margin-left: 50%;}
上面的那个是初始属性，下面的这个是激活状态的属性，transition：all 0.8s;这个是表示动画全过程的持续时间，主要是那个时间，不能太长也不能太短，这个看自己的调试，自己觉得怎么舒服就怎么定。
这个动画是一个图片从左往右移动从无到有的一个动画：opacity是表示图片的显示从完全透明到完全不透明；transition-delay，表示延迟。这样的一个简单的动画就完成了.
网友评论