Animation can also be completely done in CSS. In many cases, you will probably run into some interesting demos online and would like to incorporate the CSS-only code for animation. If the animation is not as critical to the user experience, you could just use to add additional effects to the app. CSS animation is great because you don't have to write JavaScript code to manage the animation and just leave the browser to process it.
In this section, you will build an app to show some floating squares in the background of your login page, as shown:
There is no need to test in a physical device because CSS animation will work just fine in the Ionic app.
Here are the instructions:
BubbleLogin
app using the blank
template, as follows, and go to the BubbleLogin
folder:$ ionic start BubbleLogin blank --v2 $ cd BubbleLogin
./src/pages/home/home.html
file and modify the content with the following code:<ion-content #myContent class="home"> <ul class="bg-bubbles"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ion-list> <ion-item> <ion-label>Username</ion-label> <ion-input type="text"></ion-input> </ion-item> <ion-item class="input-password"> <ion-label>Password</ion-label> <ion-input type="password" ></ion-input> </ion-item> </ion-list> <div padding> <button ion-button block round color="secondary">LOGIN</button> </div> <p class="logo"> <ion-icon name="ios-chatbubbles"></ion-icon> </p> </ion-content>
The bg-bubbles
class will convert a list of <li>
into floating squares pieces.
./src/pages/home/home.scss
with the following:.home { background-color: SeaGreen; .logo { margin: 0; color: white; font-size: 100px; text-align: center; } scroll-content { overflow-y: hidden; } .item { background-color: transparent; } .item-input ion-label, .item-select ion-label,input.text-input { color: white; } ion-list > .item:first-child { border-top: 0; border-bottom: 1px solid white; } ion-list > .item:first-child .item-inner { margin-right: 8px; } ion-list .item-inner { border-bottom: 0; } .input-password { border-bottom: 1px solid white!important; item-inner { border-bottom: 1px solid white; margin-right: 8px; } } } .bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; li { position: absolute; list-style: none; display: block; width: 40px; height: 40px; background-color: black; opacity: 0.2; bottom: -160px; -webkit-animation: square 25s infinite; animation: square 25s infinite; -webkit-transition-timing-function: linear; transition-timing-function: linear; &:nth-child(1) { left: 10%; } &:nth-child(2) { left: 20%; width: 80px; height: 80px; animation-delay: 2s; animation-duration: 17s; } &:nth-child(3) { left: 25%; animation-delay: 4s; } &:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-duration: 22s; background-color: black; } &:nth-child(5) { left: 70%; } &:nth-child(6) { left: 80%; width: 120px; height: 120px; animation-delay: 3s; background-color: black; } &:nth-child(7) { left: 32%; width: 160px; height: 160px; animation-delay: 7s; } &:nth-child(8) { left: 55%; width: 20px; height: 20px; animation-delay: 15s; animation-duration: 40s; } &:nth-child(9) { left: 25%; width: 10px; height: 10px; animation-delay: 2s; animation-duration: 40s; background-color: black; } &:nth-child(10) { left: 90%; width: 160px; height: 160px; animation-delay: 11s; } } } @-webkit-keyframes square { 0% { transform: translateY(0); } 100% { transform: translateY(-700px) rotate(600deg); } } @keyframes square { 0% { transform: translateY(0); } 100% { transform: translateY(-700px) rotate(600deg); } }
$ ionic serve
Since this app does not use JavaScript for animation, you will not need to modify anything in home.ts
.
The CSS will drive the animation infinitely with the following code:
animation: square 25s infinite; transition-timing-function: linear;
You will also be using two points in the square
keyframe:
@keyframes square { 0% { transform: translateY(0); } 100% { transform: translateY(-700px) rotate(600deg); } }
So, for a 0% to 100% loop, it will move 700 px vertically and rotate 600 degrees in the duration.
The reason that each square has a different size and speed is because you can customize the CSS as per the <li>
tag further. Consider the following example:
&:nth-child(2) { left: 20%; width: 80px; height: 80px; animation-delay: 2s; animation-duration: 17s; }
Since this animation does not generate a random number of square objects and there are a limited number of objects, you could write a customization for each <li>
tag in the CSS.
Note that you have to put the animation with z-index: 0
because it will stay above other layers, such as form and button.
18.188.146.77