asked    Pearl     2018-10-22       html       15 view        1 Answer

[SOLVED] @keyframes not working in expected way CSS



I'm recoding this website for practice purposes. I've changed the background image to black in my codepen because images don't work in codepen. Here's a link to my code. I've also placed the code here in case you can't view the codepen:

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="">
  <link rel="stylesheet" type="text/css" href="">
  <link href="" rel="stylesheet">
  <title>Coming Soon</title>
</head>
<body>
  <div class="background">
      <h2 class="logo">Logo</h2>
      <div class="dropdownwrapper">
        <h1 class="bigtext">Coming Soon</h1>
      </div>
      <hr class="divider">
      <h4 class="smalltext">35 days left</h4>
  </div>
</body>
</html>

STYLES.CSS

  body {
  background-color: white;
  font-size: 10px;
}

.background {
  animation-name: fadeout;
  animation-duration: .8s;
  background-image: url(Images/forestbridge.jpg);
  background-size: cover;
  background-position: top;
  animation-fill-mode: backwards;
  height: 100vh;
  font-family: "Raleway", sans-serif;
}

.logo {
  color: white;
  font-weight: 100;
  font-size: 1.5rem;
  padding: 1rem 0 0 1rem;
}

.bigtext {
  color: white;
  text-transform: uppercase;
  font-size: 4rem;
  text-align: center;
  padding-bottom: 1rem;
}

.dropdownwrapper {
  animation-name: dropdown;
  animation-duration: .8s;
  animation-fill-mode: forwards;
}

.divider {
  border: none;
  width: 20%;
  height: 1px;
  background-color: lightgrey;
  margin-bottom: 1.5rem;
}

.smalltext {
  color: white;
  font-size: 1.25rem;
  text-align: center;
}


@keyframes fadeout {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dropdown {
  0% {
    margin-top: 10vh;
  }

  100% {
    margin-top: 40vh;
  }
}




I also have a , but it's just a standard Eric Meyer 2.0 reset (I've placed it in the codepen, though). My problem is that when you reload the W3Schools version I'm attempting to recode, the text "COMING SOON" comes down, and the line and "35 days left" text stay in place. However, in my code, the entire block of text comes down. Why is the "COMING SOON" text on my site not coming down by itself when I've only selected it's parent div that the other elements are in? How can I make it so that only the "COMING SOON" text comes down?
Thanks,
Lyfe

  1 Answer  

        answered    Wendy     2018-10-22      

This is happening because you are animating the margin-top of the COMING SOON text. Since the element is in the normal document flow, animating the margin gives the impression that the elements after the COMING SOON are also being animated, even though they are not. To resolve this, you should be animating using transform, which manipulates an element's position in place. Check out the forked codepen.

Additionally, if you wish to centre the entire block of text in the centre of the page, you should wrap all of it an div and position it absolutely. I've forked another codepen to demonstrate this.

The slide down effect appears more profound in the second codepen.





Your Answer





 2018-10-22         Julia

How to retrieve the real-time date whenever user log in into the system

This question already has an answer here: Java code for getting current time [duplicate] 14 answers In Java, many useful supporting commands require certain predefined processes. These are stored in what are called “library packages” or simply “packages”. You are allowed to use the default package without any prior mention in Java.Date date = new Date();String str = String.format("Current Date/Time : %tc", date );System.out.printf(str); [XXX]From Java 8LocalDateTime now = LocalDateTi...
 java                     3 answers                     89 view
 2018-10-22         Edward

error :object can't be deleted because its id attribute is set to None

Trying to Delete an object using shell in django. How do i delete the object say "Ron"?I use the following command:t.delete('Ron') The error: object can't be deleted because its id attribute is set to NoneSuggests that you either never saved the object t in the first place, or you changed the primary key (here id) to None manually.If you have a single object you can perform a .delete() on the object, for example:my_obj = Model.objects.get(name='Ron')my_obj.delete()You should not add extra parameters to delete except for using and keep_parents, as specified in the docume...
 django                     1 answers                     93 view
 2018-10-22         Selena

Getting a Model dynamic by knowing its name

I use Django 2.1.I have a general utility/function(using celery) that I call from the save method of a Model(is an abstract Model, inherited by other Models).Because the data from the function will be serialize, I pass to it the Model name and PK.class A(models.Model) def save(self, *args, **kwargs): send_async(model_name=type(self).__name__, pk=self.id))class B(A)class C(A)Later, I want to query the Model, but I don't know how to get the Model:I tried: model = apps.get_model('django_app_name.{}'.format(model_name)) I get the following error:No installed app with labe...
 django                     3 answers                     95 view