css3创建动画属性

Animation in web design is very popular nowadays. Using animation in your UI design gives your site a wow factor that excites your users. It also improves the usability of the site if done right.

如今，网页设计中的动画非常流行。 在用户界面设计中使用动画可以使您的网站获得极大的惊喜，从而激发用户的兴趣。 如果操作正确，它也可以提高站点的可用性。

Login and registration screens are usually dull and one dimensional so that gave me the motivation to create a tutorial on how to spice things up using CSS and javascript based animation.

登录和注册屏幕通常都是一维的，这使我有动力创建一个教程，说明如何使用CSS和基于JavaScript的动画为事情加分。

Here is the full video :

这是完整的视频：

The tutorial takes you through the steps to create a colorfully vibrant login registration web page. The design of the page is shown below :

本教程将引导您完成创建丰富多彩的登录注册网页的步骤。 该页面的设计如下所示：

The design can be broken down into a grid-like layout with reference to the HTML elements that we would need to achieve that layout as shown below:

可以参考实现该布局所需HTML元素，将设计分解为类似于网格的布局，如下所示：

From the above we can code a skeleton layout in HTML as below :

通过上面的代码，我们可以编写HTML的骨架布局，如下所示：

<div class="container"> <div class="login-register-wrapper"> <div class="nav-buttons"> <button id="loginBtn" class="active">Login</button> <button id="registerBtn">Register</button> </div> <div class="form-group"> <form action="" id="loginform"> </form> <form action="" id="registerform"> </form> </div> <div id="forgot-panel"> </div> </div> </div>

Then we fill in the blanks and sprinkle some CSS magic to get the desired look and feel. The natural order of forms would be that they are stacked vertically, we need to give the registration form specific left, top values so that the registration form sits on the right-hand side of the login form. We need it on the right-hand side so that we can animate it sliding horizontally left to right. We also apply some positional value to the forgot-panel section.

然后，我们填补空白并撒一些CSS魔术来获得所需的外观。 表单的自然顺序是将它们垂直堆叠，我们需要给注册表单指定特定的左，顶部值，以便注册表单位于登录表单的右侧。 我们需要在右侧使用它，以便可以左右滑动水平的动画。 我们还将一些位置值应用于“忘记面板”部分。

The mechanics of the animations will be activated by clicking on the buttons under the “nav-buttons” section”, when this is clicked we have some javascript code that changes the left positional values of the forms. We also toggle the opacity values so that the form in focus is visible and the other form is invisible with opacity zero. Below is the Javascript that assigns the click event and changes the CSS values for the animation to work:

单击“导航按钮”部分下的按钮将激活动画的机制，单击此按钮后，我们将具有一些javascript代码，这些代码可更改表格的左侧位置值。 我们还可以切换不透明度值，以使焦点中的窗体可见，而另一个窗体不可见且不透明度为零。 下面是分配click事件并更改CSS值以使动画起作用的Javascript：

<script> // Grab dom elements from html layout var loginForm=document.getElementById("loginform-wrapper"); var registerForm=document.getElementById("registerform"); var loginBtn=document.getElementById("loginBtn"); var registerBtn=document.getElementById("registerBtn"); var forgot= document.getElementById("forgot-panel"); //Registration button is clicked registerBtn.onclick=function() { //Change css properties loginForm.style.left="-430px"; loginForm.style.opacity="0"; forgot.style.left = "-430px"; forgot.style.opacity = '0'; registerForm.style.left= "0px"; registerForm.style.opacity="1"; loginBtn.classList.remove("active"); registerBtn.classList.add("active"); } //login button is clicked loginBtn.onclick=function() { //Change css propertie loginForm.style.left="0px"; loginForm.style.opacity="1"; forgot.style.left = "0px"; forgot.style.opacity = '1'; registerForm.style.left = "430px"; registerForm.style.opacity = "0"; loginBtn.classList.add("active"); registerBtn.classList.remove("active");}</script>

the final piece of magic to apply is to add the transition property “transition: all .5s ease;” to anything that you want animated: In my case to animate the forms when position changes, I just added the following to the form and forgot-panel elements:

最后要应用的魔术是添加过渡属性“ transition ：all .5s easy;” 到您想要动画化的任何东西：在我的情况下，当位置改变时为表单设置动画，我只是将以下内容添加到表单和忘了面板元素中：

form, #forgot-panel { transition: all .5s ease;}

结论 (Conclusion)

There are many ways to do animation, this approach is more Javascript, but you could equally have all the property changes happen in the CSS and have javascript toggle between different classes instead of changing the CSS properties. So hope you enjoyed the tutorial.

有很多方法可以制作动画，这种方法更多的是Javascript，但是您同样可以在CSS中进行所有属性更改，并且可以在不同类之间切换javascript，而无需更改CSS属性。 因此希望您喜欢本教程。

PS. You can see the code on github at : https://github.com/ui-code-tv/animated-login-register-form

PS。 您可以在github上查看代码： https : //github.com/ui-code-tv/animated-login-register-form

翻译自: https://medium.com/@keefvdrive/how-to-create-an-animated-login-register-web-page-with-html-css3-and-javascript-7b5855eb5e50

css3创建动画属性