CSS implements the function of hiding the search box (animation forward and reverse sequence)

Placing a search box in the top menu bar is a common scenario, but if the search function is not used so frequently and the content in the menu bar is already crowded, placing a complete search box there will not look so beautiful. Therefore, a common practice is to only put a search icon and display the entire search box when needed, as shown in the following figure:

Implementation ideas

The search box is not displayed in the initial state. It slides in from the right when the mouse moves in. Therefore, the hidden or transparency attributes of the search box itself cannot be used. It is necessary to use overflow: hidden of the parent element to hide it and move the input box outside the display range of the parent element, and move it back when needed.

There are two ways to achieve animation effects in CSS: transition and animation . Since there are only two simple effects here: the search box moves and the icon transparency changes, transition is sufficient.

The implementation of these two animations is simple, but there are some small details:

• The two animations are not performed at the same time, but one after the other. You need to use transition-delay to achieve the sequence of the two effects.
• The two processes of showing and hiding seem to be exactly the same, but if you look closely you will find that the order of the animations is different: when showing, the icon disappears first and the search box moves in; when hiding, the search box moves out first and the icon appears later. Therefore, a separate setting is required.

Code Implementation

The complete style sheet is attached at the end of the article. If you don’t want to read the specific ideas, you can skip this section and copy it directly.

Basic Style

Let’s start with some basic styles. The icons used here are material design icons.

<div class="search">
  <input class="bar" placeholder="Please enter content" />
  <span class="material-icons icon">search</span>
</div>
.icon {
  width: 24px;
  height: 24px;
}

.bar {
  height: 26px;
  width: 200px;
  padding: 1px 9px;
  border: #fff 1px solid;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
}
::placeholder {
  color: #ccc; /* Modify the color of the placeholder in input*/
}

.search {
  height: 30px;
  display: flex;
  align-items: center;
} 

Hide search box

There are many ways to move the search box, such as using absolute or relative positioning.

• If the search box is set to absolute position: absolute ), the search box will be extracted from the input stream. In layman's terms, the parent element will be rendered as if it does not exist. In this way, the width of the parent element and the position of the search icon need to be specified separately.
• In contrast, relative positioning ( position: relative ) simply moves the position of the element without any effect on other elements, making it easier to use here.

There is also a more direct method: the transform property. Through this property, you can implement transformation operations such as translation, rotation, and scaling of elements without affecting other elements. translateX() attribute used here translates the element by a specified distance along the X axis (horizontally). From the perspective of translation alone, there is no obvious difference in the effects compared to using relative positioning.

PS: I'm sure I'm not the only one who can't tell the difference between transition, transform, and translate.

.search {
  overflow: hidden;
}
.bar {
  transform: translateX(224px);
  /* 
    The previous sentence can also be replaced by the following two sentences, with the same effect position: relative;
    left: 224px;
  */
}

Animation Sequence

Animation is achieved through the transition property. transition is an abbreviation of transition-property, transition-duration, transition-timing-function and transition-delay (for example, border: red 1px solid; ). The four properties specify the properties, duration, timing curve and delay time of the transition animation respectively.

• The property is the property to which the transition animation is applied
• The time curve is the speed change of the animation, such as starting slow, fast in the middle, and slow at the end. It can be better looking and smoother than uniform motion.
• The delay time is to delay the animation for a period of time after the trigger condition is met. It can be used to implement the sequential execution of multiple animations.

The transition attribute is essentially the Flash tween animation that we learned in elementary school computer class. It specifies the start and end states of an attribute and automatically completes the transition animation in between. The original attribute of the element is the starting state, the animation after the mouse moves over, and the :hover pseudo-class attribute of the natural element is the ending state.

.icon {
  opacity: 1;
  transition: opacity 0.3s ease; /* The default value of the delay property is 0 */
}
.search:hover .icon {
  opacity: 0;
}

.bar {
  transform: translateX(224px);
  transition: transform 0.3s ease-in-out 0.3s;
}
.search:hover .bar {
  transform: translateX(24px);
}

Reverse sequence

This can basically achieve the desired animation effect, but when the search box is hidden, the icon appears first and then slides out after the search box, which is not beautiful enough. The solution is also very simple, just set different delay attributes for the hover pseudo-class.

One thing to note is that the delay attribute in the hover pseudo-class corresponds to the delay when the mouse moves up, and the delay in the element's own attributes corresponds to the delay in resuming the animation when the mouse moves out. It may not be the same as your first reaction (but it makes sense if you think about it), so don’t write it backwards.

.icon {
  transition: opacity 0.3s ease 0.3s;
}

.search:hover .icon {
  transition-delay: 0s;
}

.bar {
  transition: transform 0.3s ease-in-out 0s;
}

.search:hover .bar {
  transition-delay: 0.3s;
}

Trigger area

In fact, the above steps are enough for the desired animation effect. But there is still a small problem: the animation is triggered by the hover state of the parent element .search, so if the mouse moves to the left of the search icon where the search box should be (but now there is nothing, it is hidden), it will still trigger the animation of displaying the search box. This is actually not unacceptable.

If you want to trigger the animation only when the mouse hovers over the icon, just change the trigger condition to the hover state of .icon. However, since there is only a successor element selector but no predecessor element selector in CSS (because the principle of DOM rendering CSS is that backtracking cannot occur), you need to adjust the order of the icon and search box in HTML.

<div class="search">
  <span class="material-icons icon">search</span>
  <input class="bar" placeholder="Please enter content" />
</div>

Then modify the corresponding styles and selectors.

.icon:hover {
  opacity: 0;
  transition-delay: 0s;
}

.icon:hover + .bar { /* + adjacent sibling selector*/
  transform: translateX(24px);
  transition-delay: 0.3s;
}

.search {
  display: flex;
  flex-direction: row-reverse; /* Make the search box still on the left side of the icon*/
}

Appendix: Complete Stylesheet

<div class="search">
  <span class="material-icons icon">search</span>
  <input class="bar" placeholder="Please enter content" />
</div>
.icon {
  width: 24px;
  height: 24px;
  opacity: 1;
  transition: opacity 0.3s ease 0.3s;
}

.icon:hover {
  opacity: 0;
  transition-delay: 0s;
}

.bar {
  height: 26px;
  width: 180px;
  padding: 1px 9px;
  border: #fff 1px solid;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
  transform: translateX(224px);
  transition: transform 0.3s ease-in-out 0s;
}

.icon:hover + .bar {
  transform: translateX(24px);
  transition-delay: 0.3s;
}

::placeholder {
  color: #ccc;
}

.search {
  height: 30px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  overflow: hidden;
}

This is the end of this article about how to use CSS to implement the hidden search box function (animation forward and reverse sequence). For more relevant CSS animation forward and reverse sequence content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!