css动画从底部移动到某个位置

在Web开发中，CSS动画可以为网页增添生动活泼的交互元素。下面我们来介绍一种从底部移动到特定位置的CSS动画效果。

.move-from-bottom{
    position: fixed;
    bottom: -50px; /*元素从底部开始移动*/
    left: 50%; /*元素居中*/
    transform: translateX(-50%); /*水平居中*/
    animation: move 2s ease-out forwards; /*2秒内，缓出移动到指定位置*/

    /*CSS3动画*/
    @keyframes move{
        0%{
            bottom: -50px;
            opacity: 0;
        }
        100%{
            bottom: 100px; /*移动到距离底部100像素的位置*/
            opacity: 1;
        }
    }
}

代码解释：

首先我们将要进行动画的元素的position设置为fixed，bottom为-50px，也就意味着元素位置在底部往上50px的地方。然后left设置为50%，这样可以使它水平居中；使用transform: translateX(-50%);可以使其继续保持水平居中。

接下来是关键部分——CSS3动画。我们定义了一个名为move的动画，每个动画状态的bottom值从-50px到100px，opacity由0到1，表示从透明到不透明的过程。最后再加上animation属性，将刚定义的动画应用在要进行动画的元素上，使得其2秒内向制定位置移动。

最终效果：

下面是一个使用JSfiddle实现的效果展示(please open):

https://jsfiddle.net/pjxzf9ro/